@persona/design-system 0.10.13 → 0.10.14

package/dist/DataTable.d.mts

@@ -1,2 +1,2 @@
-import { a as FloatingActionBarContainer, i as DataTableProps, n as DataTableContainer, r as DataTableControls, t as DataTable } from "./DataTable-on3vGhyi.mjs";
+import { a as FloatingActionBarContainer, i as DataTableProps, n as DataTableContainer, r as DataTableControls, t as DataTable } from "./DataTable-0nhT5_Fe.mjs";
 export { DataTable, DataTable as default, DataTableContainer, DataTableControls, DataTableProps, FloatingActionBarContainer };

package/dist/DropdownButton.d.mts

@@ -1,5 +1,5 @@
 import { r as ButtonProps } from "./Button-DjD8QxcY.mjs";
-import { n as DropdownMenuProps } from "./DropdownMenu-eVY-Yjpq.mjs";
+import { n as DropdownMenuProps } from "./DropdownMenu-Db6N6ZNB.mjs";
 import { FC, ReactNode } from "react";
 
 //#region src/components/DropdownButton/DropdownButton.d.ts

package/dist/{DropdownMenu-eVY-Yjpq.d.mts → DropdownMenu-Db6N6ZNB.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-DvzoR8e7.mjs";
 import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -72,4 +72,4 @@ declare const _default: (({
 };
 //#endregion
 export { DropdownMenuProps as n, _default as r, DropdownMenu as t };
-//# sourceMappingURL=DropdownMenu-eVY-Yjpq.d.mts.map
+//# sourceMappingURL=DropdownMenu-Db6N6ZNB.d.mts.map

package/dist/DropdownMenu.d.mts

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "./DropdownMenu-eVY-Yjpq.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "./DropdownMenu-Db6N6ZNB.mjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

package/dist/IndexTableLayout.d.mts

@@ -1,7 +1,7 @@
 import { r as BreadcrumbsProps } from "./Breadcrumbs-3MtvzTPi.mjs";
-import { i as BaseFilterConfig, s as FilterConfig } from "./types-BTaKBrxG.mjs";
-import { r as TableControlsProps } from "./TableControls-v1NmlFTW.mjs";
-import { i as DataTableProps } from "./DataTable-on3vGhyi.mjs";
+import { i as BaseFilterConfig, s as FilterConfig } from "./types-BvaXqjUm.mjs";
+import { r as TableControlsProps } from "./TableControls-BGKL7_zF.mjs";
+import { i as DataTableProps } from "./DataTable-0nhT5_Fe.mjs";
 import { r as PageHeaderProps } from "./PageHeader-UPiqJpIF.mjs";
 import { r as PageLayoutWidth } from "./PageLayoutFrame-4QGs7x-t.mjs";
 import { UseColumnConfigurationOptions } from "./useColumnConfiguration.mjs";

package/dist/InlineCombobox.d.mts

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-C65YFYqj.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-B6Z23mby.mjs";
 import { RefObject } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/InlineInput.d.mts

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-C65YFYqj.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-B6Z23mby.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/TableBox/InlineInput.d.ts

package/dist/{ListBox-Bgug8YZF.d.mts → ListBox-l47zUDj4.d.mts}

@@ -1,5 +1,5 @@
 import { r as ButtonProps } from "./Button-DjD8QxcY.mjs";
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.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-Bgug8YZF.d.mts.map
+//# sourceMappingURL=ListBox-l47zUDj4.d.mts.map

package/dist/ListBox.d.mts

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

package/dist/{ListBoxField-Cc1sX2bo.d.mts → ListBoxField-Di_6uD3S.d.mts}

@@ -1,6 +1,6 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
-import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
-import { r as ListBoxProps } from "./ListBox-Bgug8YZF.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.mjs";
+import { o as ImplementsFormField } from "./inputFields-B7parF2l.mjs";
+import { r as ListBoxProps } from "./ListBox-l47zUDj4.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-Cc1sX2bo.d.mts.map
+//# sourceMappingURL=ListBoxField-Di_6uD3S.d.mts.map

package/dist/ListBoxField.d.mts

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

package/dist/{LogicRow-B1_35ZJT.d.mts → LogicRow-7f17CKrW.d.mts}

@@ -1,5 +1,5 @@
 import { n as InputSizes } from "./input-JDU1Goyr.mjs";
-import { n as ListBoxItemProps } from "./ListBox-Bgug8YZF.mjs";
+import { n as ListBoxItemProps } from "./ListBox-l47zUDj4.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-B1_35ZJT.d.mts.map
+//# sourceMappingURL=LogicRow-7f17CKrW.d.mts.map

package/dist/LogicRow.d.mts

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

package/dist/MaskedInput.d.mts

@@ -4,7 +4,7 @@ import { IMaskInputProps } from "react-imask/mixin";
 
 //#region src/components/MaskedInput/MaskedInput.d.ts
 type MaskedInputProps = Omit<IMaskInputProps<HTMLInputElement>, 'inputRef' | 'componentProps' | 'size' | 'ref'> & InputProps;
-declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "ref" | "size" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
+declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "size" | "ref" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { MaskedInput, MaskedInput as default, MaskedInputProps };
 //# sourceMappingURL=MaskedInput.d.mts.map

package/dist/{Menu-keVl-eKm.d.mts → Menu-DvzoR8e7.d.mts}

@@ -22,7 +22,7 @@ interface MenuItemProps<T extends ElementType = 'div'> {
   selected?: boolean;
   size?: 'sm' | 'md';
 }
-declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "selected" | "disabled" | "focused" | "variant" | "size">, never>;
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "size" | "variant" | "disabled" | "focused" | "selected">, 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-keVl-eKm.d.mts.map
+//# sourceMappingURL=Menu-DvzoR8e7.d.mts.map

package/dist/Menu.d.mts

@@ -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-keVl-eKm.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-DvzoR8e7.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/{Modal-SnCo7ecm.mjs → Modal-C_vSgqgl.mjs}

@@ -251,8 +251,8 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 		})
 	});
 });
-const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open }) => {
-	const [portalContainer, setPortalContainer] = useState(null);
+const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size = "md", title, footer, tabs, defaultOpen, onOpenChange, isDismissable = false, isKeyboardDismissDisabled = false, open, portalContainer }) => {
+	const [modalElement, setModalElement] = useState(null);
 	const overlayState = useOverlayTriggerState({
 		isOpen: open,
 		defaultOpen,
@@ -260,26 +260,29 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 	});
 	const surfaceId = useEmbeddedSurfaceId();
 	const { insetRight: modalInsetRight, panelState } = useModalInsetRight();
+	const transitionMs = panelState === "opening" ? SIDEBAR_OPEN_TRANSITION_MS : panelState === "closing" ? SIDEBAR_CLOSE_TRANSITION_MS : 0;
+	const content = /* @__PURE__ */ jsx(ModalCard, {
+		size,
+		title,
+		footer,
+		tabs,
+		noBodyPadding,
+		...contentProps,
+		portalContainer: modalElement,
+		children: typeof children === "function" ? children({ portalContainer: modalElement }) : children
+	});
 	const overlay = /* @__PURE__ */ jsx(EmbeddedSurfaceOverlay, {
 		surfaceId,
 		$insetRight: modalInsetRight,
-		$transitionMs: panelState === "opening" ? SIDEBAR_OPEN_TRANSITION_MS : panelState === "closing" ? SIDEBAR_CLOSE_TRANSITION_MS : 0,
+		$transitionMs: transitionMs,
 		isDismissable,
 		isKeyboardDismissDisabled,
+		UNSTABLE_portalContainer: portalContainer ?? void 0,
 		shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
 		children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
-			ref: setPortalContainer,
+			ref: setModalElement,
 			surfaceId,
-			children: /* @__PURE__ */ jsx(ModalCard, {
-				size,
-				title,
-				footer,
-				tabs,
-				noBodyPadding,
-				...contentProps,
-				portalContainer,
-				children: typeof children === "function" ? children({ portalContainer }) : children
-			})
+			children: content
 		})
 	});
 	if (!trigger) return /* @__PURE__ */ jsx(OverlayTriggerStateContext.Provider, {
@@ -297,4 +300,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-SnCo7ecm.mjs.map
+//# sourceMappingURL=Modal-C_vSgqgl.mjs.map

package/dist/{Modal-SnCo7ecm.mjs.map → Modal-C_vSgqgl.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-SnCo7ecm.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\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 { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } 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  SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n  from {\n    opacity: 0;\n  }\n`;\n\nconst overlayExit = keyframes`\n  to {\n    opacity: 0;\n  }\n`;\n\nconst modalRise = keyframes`\n  from {\n    transform: translateY(${Spacing[2]});\n  }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\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 ${SIDEBAR_TRANSITION_EASING};\n  animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n  &[data-exiting] {\n    animation:\n      ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n      ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n    animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n    animation-play-state: running;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &,\n    &[data-exiting] {\n      animation-duration: ${ReducedMotionFade.duration};\n      animation-timing-function: ${ReducedMotionFade.easing};\n    }\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  /* No forwards fill: a held transform makes the card the containing block for portaled menus. */\n  animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n  animation-delay: var(--pds-modal-animation-delay, 0ms);\n  animation-play-state: var(--pds-modal-animation-play-state, running);\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n  &[data-exiting] {\n    animation: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\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 = ({ onClick, ...props }: ButtonProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <ModalCloseButton\n      variant='text'\n      width='icon'\n      size='md'\n      {...props}\n      onClick={(event: MouseEvent<HTMLButtonElement>) => {\n        // Return the consumer's result so Button can await a returned Promise (pending state,\n        // swallowed rejection). The modal still closes immediately, as it did before.\n        const result = onClick?.(event);\n        if (!event.defaultPrevented) {\n          state?.close();\n        }\n        return result;\n      }}\n    >\n      <XIcon />\n    </ModalCloseButton>\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 overlayState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  });\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 overlay = (\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  );\n\n  // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n  // pressable child, which react-aria warns about, so provide the overlay state directly.\n  if (!trigger) {\n    return (\n      <OverlayTriggerStateContext.Provider value={overlayState}>\n        {overlay}\n      </OverlayTriggerStateContext.Provider>\n    );\n  }\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <Pressable>{trigger}</Pressable>\n      {overlay}\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,MAAM,eAAe,SAAS;;;;;AAM9B,MAAM,cAAc,SAAS;;;;;AAM7B,MAAM,YAAY,SAAS;;4BAEC,QAAQ,GAAG;;;AAQvC,MAAM,qBAAqB,OAAO,aAAa;kCAMb,EAAE,wBAAwB,kBAAkB;uCACvC,EAAE,mBAAoB,eAAe,WAAW,UAAW;;;;;;YAMtF,EAAE,kBAAkB,YAAY;uBACrB,EAAE,oBAAoB,cAAc,KAAK,0BAA0B;eAC3E,aAAa,GAAA,QAA2B,GAAA,6BAA0B;sBAC3D,EAAE,wBAAwB,kBAAkB;2BACvC,EAAE,mBAAoB,eAAe,WAAW,UAAW;;;;QAI9E,aAAa,GAAA,QAA2B,GAAA,6BAA0B;QAClE,YAAY,GAAA,QAA6B,GAAA,6BAAyB;wBAClD,EAAE,wBAAwB,kBAAkB;;;;;;;4BAOxC,kBAAkB,SAAS;mCACpB,kBAAkB,OAAO;;;;;;;;AAS5D,MAAM,cAAc,OAAOA,MAAU;;;;;;eAMtB,UAAU,GAAA,QAA2B,GAAA,6BAA0B;;;IAG1E,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;;;;;;;;;;;;;AAgB5D,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,aAAa,KAAK;AAC1D,oBAAmB,UAAU;AAC7B,QAAO,oBAAC,aAAD;EAAkB;EAAM;EAAuB,CAAA;EAEzD;AAQD,MAAM,0BAA0B,EAAE,WAAW,GAAG,YAAyC;CAEvF,MAAM,SADQ,WAAW,2BACL,EAAE,UAAU;CAChC,MAAM,EAAE,OAAO,qBAAqB,uBAAuB,WAAW,OAAO;CAE7E,MAAM,EAAE,aAAa,eAAe,GAAG,iBAAiB;AACxD,QACE,oBAAC,oBAAD;EACE,GAAI;EACS;EACE;EACf,mBAAmB;EACnB,cAAc,UAAU,CAAC;EACzB,CAAA;;AAIN,MAAM,mBAAmB,OAAOC,SAAO;;aAE1B,QAAQ,GAAG;mBACL,QAAQ,GAAG;;;;AAK9B,MAAM,cAAc,OAAO,OAAO,CAAC,MAAM;CACvC,SAAS;CACT,OAAO;CACP,SAAS,QAAQ;CAClB,CAAC;aACW,QAAQ,GAAG,GAAG,QAAQ,GAAG;2BACX,EAAE,YAAY,cAAc,OAAO,gBAAgB,MAAM,cAAc,CAAC;;AAGnG,MAAM,mBAAmB,OAAO,GAAG;;;AAInC,MAAa,eAAe;AAC5B,MAAa,eAAe;AAE5B,MAAa,cAAc,EAAE,SAAS,GAAG,YAAyB;CAChE,MAAM,QAAQ,WAAW,2BAA2B;AACpD,QACE,oBAAC,kBAAD;EACE,SAAQ;EACR,OAAM;EACN,MAAK;EACL,GAAI;EACJ,UAAU,UAAyC;GAGjD,MAAM,SAAS,UAAU,MAAM;AAC/B,OAAI,CAAC,MAAM,iBACT,QAAO,OAAO;AAEhB,UAAO;;YAGT,oBAAC,OAAD,EAAS,CAAA;EACQ,CAAA;;AAiBvB,MAAM,cAAc,EAAE,UAAU,GAAG,YAA6B;AAC9D,QACE,oBAACC,WAAD;EAAS,MAAK;EAAK,OAAM;EAAU,IAAIC;EAAa,MAAK;EAAQ,GAAI;EAClE;EACO,CAAA;;AAId,MAAM,cAAc,OAAO,OAAO;oBACd,EAAE,UAAU,YAC5B,WAAW,SAAS,aAAa,cAAc,OAAO,gBAAgB,MAAM,cAAc,GAAG;cACnF,EAAE,eACZ,WACI,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,OACrD,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,GAAG,GAAG,QAAQ,KAAK;;AAGlE,MAAM,cAAc,OAAO,OAAO;kBAChB,QAAQ,GAAG;;AAG7B,MAAM,eAAe,OAAO,OAAO;;;AAInC,MAAM,aAAa,OAAOC,aAAK;;YAEnB,EAAE,YAAY;AACtB,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO;;EAEX;gBACY,EAAE,OAAO,YAAY;AACjC,SAAQ,OAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,QACE,QAAO,MAAM,MAAM,MAAM;;EAE7B;;iBAEa,EAAE,YAAa,UAAU,SAAS,wBAAwB,OAAQ;;;;KAI9E,EAAE,YACH,UAAU,UACV;;IAEA;;;AA0DJ,MAAM,sBAAsB,OAAOA,aAAK,KAAK;;IAKzC,kBAAkB;;;KAGjB,EAAE,iBACH,aACI,gBACA;oBACY,QAAQ,GAAG;qBACV,QAAQ,GAAG;IAC5B;KACC,EAAE,cAAc,WAAW,iBAAiB;;;;;AAMjD,MAAM,YAAY,WAAmD,SAAS,UAC5E,EACE,OACA,UACA,kBAAkB,MAClB,kBACA,MACA,QACA,MACA,gBAAgB,OAChB,iBACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,eAAe;CAC/B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,EAAE;AAGvD,iBAAgB;AACd,oBAAkB,EAAE;IACnB,CAJc,MAAM,UAAU,EAIpB,CAAC;CAEd,MAAM,gBACJ,qBAAC,aAAD;EAAa,SAAQ;EAAa,OAAM;EAAS,SAAS,QAAQ;EAAI,UAAU,QAAQ,KAAK;YAA7F,CACE,oBAAC,kBAAD,EAAA,UAAmB,QAAQ,oBAAC,YAAD,EAAA,UAAa,OAAmB,CAAA,GAAG,MAAwB,CAAA,EACrF,mBAAmB,oBAAC,YAAD,EAAY,cAAY,oBAAoB,QAAQ,YAAc,CAAA,CAC1E;;CAGhB,MAAM,cAAc,OAClB,qBAAC,OAAD,EAAA,UAAA,CACG,eACD,oBAAC,aAAD,EAAA,UACG,KAAK,KAAK,KAAK,QACd,oBAAC,KAAD;EAEE,UAAU,mBAAmB;EAC7B,IAAI,iBAAiB;EACrB,eAAe,kBAAkB,IAAI;EACrC,iBAAe,uBAAuB;YAErC,IAAI;EACD,EAPC,IAAI,KAOL,CACN,EACU,CAAA,CACR,EAAA,CAAA,GAER;AAGF,QACE,oBAAC,cAAD;EAAc,GAAI;EAAY;YAC5B,qBAAC,YAAD;GAAY,UAAA;GAAS,OAAO;aAA5B;KACI,mBAAmB,UAAU;IAC9B,OACC,KAAK,KAAK,KAAK,QACb,oBAAC,qBAAD;KAEE,YAAY;KACZ,SAAS,mBAAmB;KAC5B,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB,IAAI;KAC/B,mBAAiB,iBAAiB,IAAI;eAErC,OAAO,IAAI,aAAa,aACrB,IAAI,SAAS,EAAE,iBAAiB,CAAC,GACjC,IAAI;KACY,EAVf,IAAI,KAUW,CACtB,GAEF,oBAAC,qBAAD;KACE,YAAY;KACZ,MAAM,OAAO,aAAa,KAAA;KAC1B,IAAI,uBAAuB;KAC3B,mBAAiB,iBAAiB;KAEjC;KACmB,CAAA;IAGvB,UAAU,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;IACnC;;EACA,CAAA;EAEjB;AAiFF,MAAMC,WAAS,EACb,UACA,SACA,cACA,gBAAgB,OAChB,OAAO,MACP,OACA,QACA,MACA,aACA,cACA,gBAAgB,OAChB,4BAA4B,OAC5B,WACgB;CAChB,MAAM,CAAC,iBAAiB,sBAAsB,SAAgC,KAAK;CACnF,MAAM,eAAe,uBAAuB;EAC1C,QAAQ;EACR;EACA;EACD,CAAC;CACF,MAAM,YAAY,sBAAsB;CACxC,MAAM,EAAE,YAAY,iBAAiB,eAAe,oBAAoB;CAuBxE,MAAM,UACJ,oBAAC,wBAAD;EACa;EACX,aAAa;EACb,eAzBF,eAAe,YACX,6BACA,eAAe,YACb,8BACA;EAsBW;EACY;EAC3B,+BAA+B,YAAY,CAAC,QAAQ,QAAQ,8BAA8B;YAE1F,oBAAC,sBAAD;GAAsB,KAAK;GAA+B;aACvD,oBAxBJ,WAAD;IACQ;IACC;IACC;IACF;IACS;IACf,GAAI;IACa;cAEhB,OAAO,aAAa,aAAa,SAAS,EAAE,iBAAiB,CAAC,GAAG;IACxD,CAcA;GACa,CAAA;EACA,CAAA;AAK3B,KAAI,CAAC,QACH,QACE,oBAAC,2BAA2B,UAA5B;EAAqC,OAAO;YACzC;EACmC,CAAA;AAI1C,QACE,qBAAC,eAAD;EAAe,QAAQ;EAAmB;EAA2B;YAArE,CACE,oBAAC,WAAD,EAAA,UAAY,SAAoB,CAAA,EAC/B,QACa;;;AAIpB,IAAA,gBAAe,OAAO,OAAOA,SAAO,EAClC,OAAO,YACR,CAAC"}
+{"version":3,"file":"Modal-C_vSgqgl.mjs","names":["AriaModal","Button","Heading","AriaHeading","Card","Modal"],"sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\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 { useOverlayTriggerState } from 'react-stately';\nimport styled, { keyframes } 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  SIDEBAR_TRANSITION_EASING,\n} from '#src/lib/useModalInsetRight';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst overlayEnter = keyframes`\n  from {\n    opacity: 0;\n  }\n`;\n\nconst overlayExit = keyframes`\n  to {\n    opacity: 0;\n  }\n`;\n\nconst modalRise = keyframes`\n  from {\n    transform: translateY(${Spacing[2]});\n  }\n`;\n\n// The card's rise reads the overlay's embedded-surface gate through these inherited properties, so\n// the two start on the same frame. The exit is layered over the entrance rather than replacing it, so\n// it fades from wherever the entrance had got to; the entrance runs on so a pending gate can't hold\n// the exit open.\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  --pds-modal-animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  --pds-modal-animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\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 ${SIDEBAR_TRANSITION_EASING};\n  animation: ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-play-state: ${({ $hostPending }) => ($hostPending ? 'paused' : 'running')};\n\n  &[data-exiting] {\n    animation:\n      ${overlayEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both,\n      ${overlayExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n    animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms, 0ms;\n    animation-play-state: running;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &,\n    &[data-exiting] {\n      animation-duration: ${ReducedMotionFade.duration};\n      animation-timing-function: ${ReducedMotionFade.easing};\n    }\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  /* No forwards fill: a held transform makes the card the containing block for portaled menus. */\n  animation: ${modalRise} ${TransitionDuration.Fast} ${TransitionEasing.Enter} backwards;\n  animation-delay: var(--pds-modal-animation-delay, 0ms);\n  animation-play-state: var(--pds-modal-animation-play-state, running);\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n\n  &[data-exiting] {\n    animation: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\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 = ({ onClick, ...props }: ButtonProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <ModalCloseButton\n      variant='text'\n      width='icon'\n      size='md'\n      {...props}\n      onClick={(event: MouseEvent<HTMLButtonElement>) => {\n        // Return the consumer's result so Button can await a returned Promise (pending state,\n        // swallowed rejection). The modal still closes immediately, as it did before.\n        const result = onClick?.(event);\n        if (!event.defaultPrevented) {\n          state?.close();\n        }\n        return result;\n      }}\n    >\n      <XIcon />\n    </ModalCloseButton>\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  /**\n   * Element the modal overlay is portaled into. Defaults to `document.body`.\n   */\n  portalContainer?: HTMLElement | null;\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  portalContainer,\n}: ModalProps) => {\n  const [modalElement, setModalElement] = useState<HTMLDivElement | null>(null);\n  const overlayState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen,\n    onOpenChange,\n  });\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={modalElement}\n    >\n      {typeof children === 'function' ? children({ portalContainer: modalElement }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const overlay = (\n    <EmbeddedSurfaceOverlay\n      surfaceId={surfaceId}\n      $insetRight={modalInsetRight}\n      $transitionMs={transitionMs}\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      UNSTABLE_portalContainer={portalContainer ?? undefined}\n      shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n    >\n      <EmbeddedSurfaceModal ref={setModalElement} surfaceId={surfaceId}>\n        {content}\n      </EmbeddedSurfaceModal>\n    </EmbeddedSurfaceOverlay>\n  );\n\n  // Without a trigger (controlled modals) DialogTrigger would render a PressResponder with no\n  // pressable child, which react-aria warns about, so provide the overlay state directly.\n  if (!trigger) {\n    return (\n      <OverlayTriggerStateContext.Provider value={overlayState}>\n        {overlay}\n      </OverlayTriggerStateContext.Provider>\n    );\n  }\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <Pressable>{trigger}</Pressable>\n      {overlay}\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/{Modal-CujB7DuB.d.mts → Modal-IVXc4p8Y.d.mts}

@@ -126,6 +126,10 @@ interface ModalProps {
    * Whether pressing the escape key closes the modal
    */
   isKeyboardDismissDisabled?: boolean;
+  /**
+   * Element the modal overlay is portaled into. Defaults to `document.body`.
+   */
+  portalContainer?: HTMLElement | null;
 }
 declare const _default: (({
   children,
@@ -140,7 +144,8 @@ declare const _default: (({
   onOpenChange,
   isDismissable,
   isKeyboardDismissDisabled,
-  open
+  open,
+  portalContainer
 }: ModalProps) => _$react_jsx_runtime0.JSX.Element) & {
   Title: ({
     children,
@@ -149,4 +154,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-CujB7DuB.d.mts.map
+//# sourceMappingURL=Modal-IVXc4p8Y.d.mts.map

package/dist/Modal.d.mts

@@ -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-CujB7DuB.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-IVXc4p8Y.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/{Select-CiofH5-f.d.mts → Select-boZ6XP8k.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.mjs";
 import { n as InputSizes, t as InputMixinProps } from "./input-JDU1Goyr.mjs";
 import * as _$react from "react";
 import { ReactNode } from "react";
@@ -80,4 +80,4 @@ declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.Re
 declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
-//# sourceMappingURL=Select-CiofH5-f.d.mts.map
+//# sourceMappingURL=Select-boZ6XP8k.d.mts.map

package/dist/Select.d.mts

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-CiofH5-f.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "./Select-boZ6XP8k.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/SmartTextInputField.d.mts

@@ -1,5 +1,5 @@
-import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
-import { n as TableBoxField } from "./TableBoxField-CHpClgsE.mjs";
+import { o as ImplementsFormField } from "./inputFields-B7parF2l.mjs";
+import { n as TableBoxField } from "./TableBoxField-6qAOW8t9.mjs";
 import SmartTextInput from "./SmartTextInput.mjs";
 import { CSSProperties, ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/TableBox.d.mts

@@ -1,3 +1,3 @@
 import { t as DragDirection } from "./useTableBoxDragAndDrop-MwbXWWDQ.mjs";
-import { a as TableBox, i as PinnedActionsCell, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "./TableBoxCell-C65YFYqj.mjs";
+import { a as TableBox, i as PinnedActionsCell, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "./TableBoxCell-B6Z23mby.mjs";
 export { DragDirection, InlineEditConfig, PinnedActionsCell, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/{TableBoxCell-C65YFYqj.d.mts → TableBoxCell-B6Z23mby.d.mts}

@@ -1,8 +1,8 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-DoKiRjgS.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-VIGR58Uc.mjs";
 import { a as TableCellProps, i as TableCell } from "./TableCell-CQsF7t4e.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-CpgNWdLS.mjs";
 import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-MwbXWWDQ.mjs";
-import { t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
+import { t as RowAction } from "./TableBoxRowActions-BDx5naRj.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -273,4 +273,4 @@ declare const TableBoxCell: ({
 }: TableBoxCellProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBox as a, PinnedActionsCell as i, TableBoxCellProps as n, TableBoxContext as o, InlineEditConfig as r, TableBoxProps as s, TableBoxCell as t };
-//# sourceMappingURL=TableBoxCell-C65YFYqj.d.mts.map
+//# sourceMappingURL=TableBoxCell-B6Z23mby.d.mts.map

package/dist/TableBoxCell.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-C65YFYqj.mjs";
+import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-B6Z23mby.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/{TableBoxField-CHpClgsE.d.mts → TableBoxField-6qAOW8t9.d.mts}

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
-import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-C65YFYqj.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.mjs";
+import { o as ImplementsFormField } from "./inputFields-B7parF2l.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-CpgNWdLS.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-B6Z23mby.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -100,4 +100,4 @@ declare const TableBoxField: {
 };
 //#endregion
 export { TableBoxFieldActionGroup as a, TableBoxFieldActionEntry as i, TableBoxField as n, TableBoxFieldAction as r, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL as t };
-//# sourceMappingURL=TableBoxField-CHpClgsE.d.mts.map
+//# sourceMappingURL=TableBoxField-6qAOW8t9.d.mts.map

package/dist/TableBoxField.d.mts

@@ -1,2 +1,2 @@
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-CHpClgsE.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-6qAOW8t9.mjs";
 export { TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TableBoxField as default };

package/dist/{TableBoxRow-CK-b79uD.d.mts → TableBoxRow-CpgNWdLS.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.mjs";
 import { t as TableRow } from "./TableRow-C4eHuRF3.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-CK-b79uD.d.mts.map
+//# sourceMappingURL=TableBoxRow-CpgNWdLS.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-CK-b79uD.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-CpgNWdLS.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-CRaabjaY.d.mts → TableBoxRowActions-BDx5naRj.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DvzoR8e7.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-CRaabjaY.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-BDx5naRj.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-BDx5naRj.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{TableControls-v1NmlFTW.d.mts → TableControls-BGKL7_zF.d.mts}

@@ -1,7 +1,7 @@
 import { n as ControlBarProps } from "./ControlBar-CDb6b1_6.mjs";
 import { n as FilterBarProps } from "./FilterBar-CA4mDAXK.mjs";
-import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BTaKBrxG.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-1nT8wneI.mjs";
+import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BvaXqjUm.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-D76ApJ_-.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -82,4 +82,4 @@ declare const TableControls: <TFilter extends BaseFilterConfig = FilterConfig>({
 }: TableControlsProps<TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsFiltersV2Props as n, TableControlsProps as r, TableControls as t };
-//# sourceMappingURL=TableControls-v1NmlFTW.d.mts.map
+//# sourceMappingURL=TableControls-BGKL7_zF.d.mts.map

package/dist/{TableControls-DM4RddQ_.mjs → TableControls-BwZl4TjJ.mjs}

@@ -28,7 +28,7 @@ import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
 import { t as Combobox } from "./Combobox-DmFQ5cAy.mjs";
 import { n as Select, r as SelectHeader, t as Option } from "./Select-DbWEgH5c.mjs";
 import { s as Popover_default } from "./Popover-DP9DXReH.mjs";
-import { i as Modal_default } from "./Modal-SnCo7ecm.mjs";
+import { i as Modal_default } from "./Modal-C_vSgqgl.mjs";
 import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CHVYVKB-.mjs";
 import { n as ErrorText } from "./FormControl-BoKGiWdQ.mjs";
 import { t as ListBox } from "./ListBox-BRgjgUSp.mjs";
@@ -5692,4 +5692,4 @@ function decodeBase64(input) {
 //#endregion
 export { isCompleteDateRange as A, TableControlsProvider as B, useFilterBarSize as C, getDefaultOperatorForType as D, getConditionValueError as E, FiltersContainer as F, ControlBar as H, getActiveFilters as I, isFilterActive as L, isRangeOperator as M, isValuelessOperator as N, getOperatorsForField as O, reconcileValueForOperator as P, resolveFilterTypeDefinition as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, DataTableCompactBar as U, useTableControls as V, withDisabledReason as W, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isNumericComparisonOperator as j, getOperatorsForType as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsContext as z };
 
-//# sourceMappingURL=TableControls-DM4RddQ_.mjs.map
+//# sourceMappingURL=TableControls-BwZl4TjJ.mjs.map