@persona/design-system 0.2.0 → 0.2.1

package/dist/components/DataTable/index.mjs

@@ -1,23 +1,23 @@
-import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
-import "../../variables/transitions.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-B-DDlRMw.mjs";
 import { isFocused } from "../../lib/pseudoClass.mjs";
-import { Z_INDICES } from "../../lib/zindex.mjs";
 import "../../variables/effect.mjs";
+import "../../variables/transitions.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
 import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-B4f3LNoW.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BnYZVCLj.mjs";
-import { n as Sticker } from "../../Sticker-BOlAy2TE.mjs";
-import { t as Checkbox } from "../../Checkbox-D77Rg7La.mjs";
-import { t as Pagination_default } from "../../Pagination-DiaJX5Da.mjs";
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-C8AdtVrT.mjs";
-import { t as Pii_default } from "../../Pii-CSBV5Is7.mjs";
-import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-51NYgFvI.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { n as Sticker } from "../../Sticker-B0TbkV4o.mjs";
+import { t as Checkbox } from "../../Checkbox-CU27-Aa8.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-DZIFSJXD.mjs";
+import { t as Pagination_default } from "../../Pagination-GALyid4q.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-C-mx8Uj0.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-BHdCaR-R.mjs";
+import { t as Pii_default } from "../../Pii-BalLvfze.mjs";
+import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-BK8DCsqi.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";

package/dist/components/DataTable/types.d.mts

@@ -1,5 +1,5 @@
-import { o as StickerProps } from "../../Sticker-C8rvpu7M.mjs";
-import { l as MenuItemProps } from "../../Menu-BLtjpLst.mjs";
+import { o as StickerProps } from "../../Sticker-BIVuastf.mjs";
+import { l as MenuItemProps } from "../../Menu-DM9OoZ71.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 

package/dist/components/DatePicker/index.mjs

@@ -1,2 +1,2 @@
-import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-CK2D9jvG.mjs";
+import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-DpGvo7Bd.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker };

package/dist/components/DropdownButton/index.mjs

@@ -1,2 +1,2 @@
-import { t as DropdownButton } from "../../DropdownButton-CaM0itat.mjs";
+import { t as DropdownButton } from "../../DropdownButton-DGgfGW_o.mjs";
 export { DropdownButton, DropdownButton as default };

package/dist/components/DropdownMenu/index.d.mts

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

package/dist/components/DropdownMenu/index.mjs

@@ -1,2 +1,2 @@
-import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-B4f3LNoW.mjs";
+import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-DZIFSJXD.mjs";
 export { DropdownMenu, DropdownMenu_default as default };

package/dist/components/FormControl/index.d.mts

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-iPeOOlFb.mjs";
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-CZFmub1N.mjs";
 import { r as useFormField } from "../../useFormField-DhwEi45-.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormField } from "../../useFormField-DhYd6bNn.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-CFYlkv7E.mjs";
+import { n as useFormField } from "../../useFormField-eftOPiXj.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-BIXJ-FPI.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

package/dist/components/FormField/index.d.mts

@@ -1,4 +1,4 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-BruK7Des.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-8rlT8pm0.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";

package/dist/components/FormField/index.mjs

@@ -1,2 +1,2 @@
-import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-Bol8gzNt.mjs";
+import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-DcGQvgNW.mjs";
 export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };

package/dist/components/HoverCopyableField/index.mjs

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-C8AdtVrT.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-BHdCaR-R.mjs";
 export { HoverCopyableField_default as default };

package/dist/components/ImageTile/index.mjs

@@ -1,15 +1,15 @@
-import { i as Paragraph } from "../../Text-hEoPeOc9.mjs";
-import "../../variables/transitions.mjs";
-import { a as Tooltip } from "../../Tooltip-B-DDlRMw.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
+import "../../variables/transitions.mjs";
+import { i as Paragraph } from "../../Text-hEoPeOc9.mjs";
+import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { n as Stack } from "../../Stack-ckRN7LrP.mjs";
-import { t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-B4f3LNoW.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
-import { t as Checkbox } from "../../Checkbox-D77Rg7La.mjs";
+import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { t as Checkbox } from "../../Checkbox-CU27-Aa8.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-DZIFSJXD.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-BPYPtFE1.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageIcon, LockedIcon, MoreIcon } from "@persona/icons";
 //#region components/ImageTile/ImageTile.tsx

package/dist/components/Input/index.d.mts

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-CEcoDtTu.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-DsS4J78T.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/components/Input/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-CSOxMzlt.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-PWfwMSJ7.mjs";
 //#region components/Input/index.ts
 var Input_default = Input;
 //#endregion

package/dist/components/Link/index.mjs

@@ -1,6 +1,6 @@
-import { paragraphMixins } from "../../mixins/text.mjs";
-import "../../variables/transitions.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
+import "../../variables/transitions.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ListBox/index.d.mts

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-CajNIX9P.mjs";
-import { n as LogicRowProps } from "../../LogicRow-DK1NcP2a.mjs";
-import { t as ListBox } from "../../index-DLV1eMsr.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-Nl9aOBeh.mjs";
+import { n as LogicRowProps } from "../../LogicRow-BAREMenx.mjs";
+import { t as ListBox } from "../../index-CdaoOvFH.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-CSMVAgHm.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-BwD-q7wF.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

package/dist/components/LoadingShimmer/index.mjs

@@ -1,2 +1,2 @@
-import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-Dsc_RCCf.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-BPYPtFE1.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input } from "../../Input-CSOxMzlt.mjs";
+import { n as Input } from "../../Input-PWfwMSJ7.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";

package/dist/components/Menu/index.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-BLtjpLst.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-DM9OoZ71.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Menu/index.mjs

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-DDXR9uHy.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-DpM8o234.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

package/dist/components/Modal/index.mjs

@@ -1,11 +1,12 @@
 import { t as Card_default } from "../../Card-CLTkZLKr.mjs";
 import { n as Heading$1 } from "../../Text-hEoPeOc9.mjs";
+import useEmbeddedSurface from "../../lib/useEmbeddedSurface.mjs";
 import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Button$1 } from "../../IconButton-Bi4kdsbV.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-DX1Spi6D.mjs";
+import { n as Button$1 } from "../../IconButton-DC4rh6ow.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-DLf4Hwa4.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import { forwardRef, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, Pressable } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
@@ -100,6 +101,13 @@ const StyledModal = styled(Modal)`
   outline: none;
   width: 100%;
 `;
+const EmbeddedSurfaceModal = forwardRef(function EmbeddedSurfaceModal({ children }, ref) {
+	useEmbeddedSurface();
+	return /* @__PURE__ */ jsx(StyledModal, {
+		ref,
+		children
+	});
+});
 const ModalCloseButton = styled(Button$1)`
   display: inline-flex;
   padding: ${Spacing[2]};
@@ -267,7 +275,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 			isDismissable,
 			isKeyboardDismissDisabled,
 			shouldCloseOnInteractOutside: (element) => !element.closest("[data-react-aria-top-layer]"),
-			children: /* @__PURE__ */ jsx(StyledModal, {
+			children: /* @__PURE__ */ jsx(EmbeddedSurfaceModal, {
 				ref: setPortalContainer,
 				children: content
 			})

package/dist/components/Modal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\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';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{ $insetRight: string; $transitionMs: number }>`\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  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: 100%;\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 ${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 }) => ($hasTabs ? 'none' : `1px solid ${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  left: 50%;\n  transform: translateX(-50%);\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100% - 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(100% - 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   * 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  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    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\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='Close' />}\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 { 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      <StyledModalOverlay\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <StyledModal ref={setPortalContainer}>{content}</StyledModal>\n      </StyledModalOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\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';\nimport useEmbeddedSurface from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{ $insetRight: string; $transitionMs: number }>`\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  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: 100%;\n`;\n\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode }>(\n  function EmbeddedSurfaceModal({ children }, ref) {\n    useEmbeddedSurface();\n    return <StyledModal ref={ref}>{children}</StyledModal>;\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 ${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 }) => ($hasTabs ? 'none' : `1px solid ${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  left: 50%;\n  transform: translateX(-50%);\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100% - 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(100% - 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   * 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  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    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\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='Close' />}\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 { 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      <StyledModalOverlay\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}>{content}</EmbeddedSurfaceModal>\n      </StyledModalOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/components/PageHeader/index.mjs

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-BI2gxol5.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-Dq-J3san.mjs";
 export { PageHeaderContainer, PageHeader as default };

package/dist/components/Pagination/index.d.mts

@@ -1,4 +1,4 @@
 import { t as Pagination } from "../../Pagination-Dcmv7bVe.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-BDo3ge1E.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-Ca4TcyxG.mjs";
 import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-bA9kCzRQ.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-DiaJX5Da.mjs";
+import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-GALyid4q.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.mjs

@@ -1,2 +1,2 @@
-import { t as Pii_default } from "../../Pii-CSBV5Is7.mjs";
+import { t as Pii_default } from "../../Pii-BalLvfze.mjs";
 export { Pii_default as default };

package/dist/components/Popover/index.mjs

@@ -1,2 +1,2 @@
-import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-5y0p85Sw.mjs";
+import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-BZ5Bs80y.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/ProgressBar/index.mjs

@@ -1,5 +1,5 @@
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { a as Tooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled, { keyframes } from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ProgressIndicator/index.mjs

@@ -1,5 +1,5 @@
-import { paragraphMixins } from "../../mixins/text.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Radio/index.mjs

@@ -1,2 +1,2 @@
-import { t as Radio } from "../../Radio-aMjdUp4K.mjs";
+import { t as Radio } from "../../Radio-CtPz3EzX.mjs";
 export { Radio, Radio as default };

package/dist/components/RadioGroup/index.mjs

@@ -1,2 +1,2 @@
-import { t as RadioGroup } from "../../RadioGroup-BpoKyoi3.mjs";
+import { t as RadioGroup } from "../../RadioGroup-sjBzFE_-.mjs";
 export { RadioGroup, RadioGroup as default };

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-Cgs6qlhN.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BugnH-h2.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

package/dist/components/Select/index.d.mts

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

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-CmJEiYXU.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-DL-AjL0Q.mjs";
 export { Option, Select, Select as default, SelectHeader };

package/dist/components/Slider/index.mjs

@@ -1,9 +1,9 @@
-import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-B-DDlRMw.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import { useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash";
 import { mergeProps } from "@react-aria/utils";

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-BXfYWjC_.mjs";
+import { t as Spinner } from "../../Spinner-BgBCCHGo.mjs";
 export { Spinner, Spinner as default };

package/dist/components/Stack/index.d.mts

@@ -1,2 +1,2 @@
-import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-DHaK1-dw.mjs";
+import { i as StackProps, n as HStackProps, r as Stack, t as HStack } from "../../Stack-CbcJykx9.mjs";
 export { HStack, HStackProps, Stack, Stack as default, StackProps };

package/dist/components/StatusIndicator/index.mjs

@@ -1,5 +1,5 @@
-import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
+import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Sticker/index.d.mts

@@ -1,2 +1,2 @@
-import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-C8rvpu7M.mjs";
+import { a as StickerContentContainer, i as StickerContainer, n as STICKER_COLOR_CONFIG, o as StickerProps, r as Sticker, s as StyledTruncatedText, t as LabelBackgrounds } from "../../Sticker-BIVuastf.mjs";
 export { LabelBackgrounds, STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StickerProps, StyledTruncatedText };

package/dist/components/Sticker/index.mjs

@@ -1,2 +1,2 @@
-import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-BOlAy2TE.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer, t as STICKER_COLOR_CONFIG } from "../../Sticker-B0TbkV4o.mjs";
 export { STICKER_COLOR_CONFIG, Sticker, Sticker as default, StickerContainer, StickerContentContainer, StyledTruncatedText };

package/dist/components/TabBar/index.mjs

@@ -1,2 +1,2 @@
-import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-DX1Spi6D.mjs";
+import { a as TabContainer, i as TabBar, n as StyledTab, r as Tab, t as TabBarIconButton_default } from "../../TabBar-DLf4Hwa4.mjs";
 export { StyledTab, Tab, TabBar, TabBar as default, TabBarIconButton_default as TabBarIconButton, TabContainer };

package/dist/components/Table/index.d.mts

@@ -1,6 +1,6 @@
 import { t as Table } from "../../Table-8jXlKYLy.mjs";
 import { t as TableHeaderCell } from "../../TableHeaderCell-CWTMf2Fe.mjs";
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-Doptc4HI.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD, u as TableTH } from "../../index-DJn4AeE4.mjs";
 import { t as TableRow } from "../../TableRow-lvjbVccA.mjs";
 import { t as TableHead } from "../../TableHead-g3afLl5B.mjs";
 import { t as TableBody } from "../../TableBody-ByEcFueE.mjs";

package/dist/components/Table/index.mjs

@@ -1,2 +1,2 @@
-import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BnYZVCLj.mjs";
+import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-C-mx8Uj0.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

package/dist/components/TableBox/index.d.mts

@@ -1,3 +1,3 @@
 import { t as DragDirection } from "../../useTableBoxDragAndDrop-CsnN52lx.mjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-CWh_riC8.mjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-BmoPs1u1.mjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as TableBoxContext, t as TableBox } from "../../TableBox-BC5l3UMT.mjs";
+import { n as TableBoxContext, t as TableBox } from "../../TableBox-DGjKVQFO.mjs";
 export { TableBoxContext, TableBox as default };

package/dist/components/TechnicalSticker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TechnicalSticker } from "../../TechnicalSticker-D7viw4H5.mjs";
+import { t as TechnicalSticker } from "../../TechnicalSticker-BrvR0zhC.mjs";
 export { TechnicalSticker, TechnicalSticker as default };

package/dist/components/Text/index.d.mts

@@ -1,2 +1,2 @@
-import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CEisq2at.mjs";
+import { a as Label, c as ParagraphProps, d as TabularNumber, i as HeadingProps, l as Span, n as DisplayProps, o as LabelProps, r as Heading, s as Paragraph, t as Display, u as SpanProps } from "../../Text-CfIFUyHt.mjs";
 export { Display, DisplayProps, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps, Span, SpanProps, TabularNumber };

package/dist/components/TextArea/index.mjs

@@ -1,2 +1,2 @@
-import { t as TextAreaWithStyle } from "../../TextArea-DjmlpCdJ.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-BFsXUkuj.mjs";
 export { TextAreaWithStyle as TextArea, TextAreaWithStyle as default };

package/dist/components/Tile/index.mjs

@@ -1,7 +1,7 @@
 import { i as Paragraph, n as Heading } from "../../Text-hEoPeOc9.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
 import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Sticker } from "../../Sticker-BOlAy2TE.mjs";
+import { n as Sticker } from "../../Sticker-B0TbkV4o.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Toast/index.mjs

@@ -1,9 +1,9 @@
-import { paragraphMixins } from "../../mixins/text.mjs";
-import "../../variables/transitions.mjs";
-import "../../lib/message.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
 import "../../variables/effect.mjs";
-import { t as IconButton } from "../../IconButton-Bi4kdsbV.mjs";
+import "../../variables/transitions.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import "../../lib/message.mjs";
+import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Toggle/index.mjs

@@ -1,2 +1,2 @@
-import { t as Toggle } from "../../Toggle-D1rEjYoN.mjs";
+import { t as Toggle } from "../../Toggle-CC2FTAKS.mjs";
 export { Toggle, Toggle as default };

package/dist/components/Tooltip/index.d.mts

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-DZVPqxai.mjs";
-import { t as HelperTooltip } from "../../HelperTooltip-Z5NdrLCT.mjs";
-import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-BKE4peKI.mjs";
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-0iXDCV2O.mjs";
+import { t as HelperTooltip } from "../../HelperTooltip-CJDG7Ugp.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-Bs6Jn5yr.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/components/Tooltip/index.mjs

@@ -1,2 +1,2 @@
-import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-B-DDlRMw.mjs";
+import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
 export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default };

package/dist/fieldPickerOptions.d.mts

@@ -1,4 +1,4 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-B8evOZpf.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-Dmzn8a53.mjs";
 import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/fieldPickerOptions.d.ts

package/dist/{index-DLV1eMsr.d.mts → index-CdaoOvFH.d.mts}

@@ -1,5 +1,5 @@
-import { n as ListBoxItemProps, r as ListBoxProps } from "./ListBox-CajNIX9P.mjs";
-import { n as LogicRowProps } from "./LogicRow-DK1NcP2a.mjs";
+import { n as ListBoxItemProps, r as ListBoxProps } from "./ListBox-Nl9aOBeh.mjs";
+import { n as LogicRowProps } from "./LogicRow-BAREMenx.mjs";
 import * as _$react from "react";
 import * as _$react_aria_components0 from "react-aria-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -52,4 +52,4 @@ declare const ListBox: {
 };
 //#endregion
 export { ListBox as t };
-//# sourceMappingURL=index-DLV1eMsr.d.mts.map
+//# sourceMappingURL=index-CdaoOvFH.d.mts.map