@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/components/Link/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_focus = require("../../mixins/focus.cjs");
 require("../../variables/transitions.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
@@ -10,8 +10,8 @@ let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_router_dom = require("react-router-dom");
 let _persona_icons = require("@persona/icons");
+let react_router_dom = require("react-router-dom");
 //#region components/Link/Link.tsx
 const IconContainer = styled_components.default.span`
   display: inline-block;

package/dist/components/Link/index.cjs.map

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

package/dist/components/Link/index.mjs

@@ -4,8 +4,8 @@ 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";
-import { Link as Link$1 } from "react-router-dom";
 import { LinkExternalIcon } from "@persona/icons";
+import { Link as Link$1 } from "react-router-dom";
 //#region components/Link/Link.tsx
 const IconContainer = styled.span`
   display: inline-block;

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

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

package/dist/components/ListBox/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_ListBox = require("../../ListBox-CE3mfDSB.cjs");
+const require_ListBox = require("../../ListBox-BCscLcYL.cjs");
 exports.ListBox = require_ListBox.ListBox;
 exports.default = require_ListBox.ListBox;
 exports.useListBoxContext = require_ListBox.useListBoxContext;

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

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

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

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

package/dist/components/ListBox/index.mjs

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

package/dist/components/LoadingShimmer/index.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../chunk-CoPdw6nB.cjs");
-const require_LoadingShimmer = require("../../LoadingShimmer-DMK9RC4N.cjs");
+const require_LoadingShimmer = require("../../LoadingShimmer-CUjbAqGd.cjs");
 exports.LoadingShimmer = require_LoadingShimmer.LoadingShimmer;
 exports.LoadingShimmerHeading = require_LoadingShimmer.LoadingShimmerHeading;
 exports.LoadingShimmerParagraph = require_LoadingShimmer.LoadingShimmerParagraph;

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-CNE6JUVF.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-Bu6KtQ06.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.cjs

@@ -2,10 +2,10 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Input = require("../../Input-DHOsR4cl.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
+require("../../chunk-CKQMccvm.cjs");
+const require_Input = require("../../Input-BDLUq-pK.cjs");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region components/MaskedInput/MaskedInput.tsx
 const MaskedInputBase = (0, require("react-imask").IMaskMixin)(({ inputRef, size, componentProps, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
 	...props,

package/dist/components/MaskedInput/index.mjs

@@ -1,6 +1,6 @@
-import { n as Input } from "../../Input-eoFk39bE.mjs";
-import { jsx } from "react/jsx-runtime";
+import { n as Input } from "../../Input-PWfwMSJ7.mjs";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";
 //#region components/MaskedInput/MaskedInput.tsx
 const MaskedInputBase = IMaskMixin(({ inputRef, size, componentProps, ...props }) => /* @__PURE__ */ jsx(Input, {

package/dist/components/MatchHighlight/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);

package/dist/components/MatchHighlight/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Spacing"],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return theme.color.background.disabled;\n      case 'partial':\n        return theme.color.variants.success.highlightLight;\n      case 'full':\n        return theme.color.variants.success.highlightDark;\n\n      default:\n        return 'none';\n    }\n  }};\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;;;;;;;AAQA,MAAa,iBAAiB,kBAAA,QAAO,IAAyB;;;kBAG5CA,uBAAAA,QAAQ,GAAG;mBACVA,uBAAAA,QAAQ,GAAG;mBACXA,uBAAAA,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,MAAM,MAAM,WAAW;EAChC,KAAK,UACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EACtC,KAAK,OACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EAEtC,QACE,QAAO;;EAEX"}
+{"version":3,"file":"index.cjs","names":["Spacing"],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return theme.color.background.disabled;\n      case 'partial':\n        return theme.color.variants.success.highlightLight;\n      case 'full':\n        return theme.color.variants.success.highlightDark;\n\n      default:\n        return 'none';\n    }\n  }};\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;;;;;;;AASA,MAAa,iBAAiB,kBAAA,QAAO,IAAyB;;;kBAG5CA,uBAAAA,QAAQ,GAAG;mBACVA,uBAAAA,QAAQ,GAAG;mBACXA,uBAAAA,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,MAAM,MAAM,WAAW;EAChC,KAAK,UACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EACtC,KAAK,OACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EAEtC,QACE,QAAO;;EAEX"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return theme.color.background.disabled;\n      case 'partial':\n        return theme.color.variants.success.highlightLight;\n      case 'full':\n        return theme.color.variants.success.highlightDark;\n\n      default:\n        return 'none';\n    }\n  }};\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;AAQA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,MAAM,MAAM,WAAW;EAChC,KAAK,UACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EACtC,KAAK,OACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EAEtC,QACE,QAAO;;EAEX"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return theme.color.background.disabled;\n      case 'partial':\n        return theme.color.variants.success.highlightLight;\n      case 'full':\n        return theme.color.variants.success.highlightDark;\n\n      default:\n        return 'none';\n    }\n  }};\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;AASA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,MAAM,MAAM,WAAW;EAChC,KAAK,UACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EACtC,KAAK,OACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EAEtC,QACE,QAAO;;EAEX"}

package/dist/components/Menu/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Menu = require("../../Menu-BpkjNO81.cjs");
+const require_Menu = require("../../Menu-BXic-30n.cjs");
 exports.FloatingCard = require_Menu.FloatingCard;
 exports.IconContainer = require_Menu.IconContainer;
 exports.ListItem = require_Menu.ListItem;

package/dist/components/Menu/index.d.cts

@@ -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-DPrNMatb.cjs";
+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-BKMxOXkj.cjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

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-DIFkRQ6x.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-BJ5c7HGD.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-DNRHo2i_.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-CVuFAxl2.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

package/dist/components/Modal/index.cjs

@@ -2,20 +2,18 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
-const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
-require("../Stack/index.cjs");
-const require_Card = require("../../Card-CyCKL-M5.cjs");
-const require_Text = require("../../Text-DVz8erdF.cjs");
-const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
-require("../Button/index.cjs");
-const require_TabBar = require("../../TabBar-BMv8dAS3.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_Card = require("../../Card-CaOItkgL.cjs");
+const require_Text = require("../../Text-CzN0DOXV.cjs");
+const require_Stack = require("../../Stack-BF-9YjA1.cjs");
+const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
+const require_TabBar = require("../../TabBar-BpHMYvNb.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
 //#region lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
@@ -123,6 +121,9 @@ const ModalFooter = (0, styled_components.default)(require_Stack.HStack).attrs({
   padding: ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[4]};
   border-top: 1px solid ${_persona_design_tokens.Color.BorderDivider};
 `;
+const ModalHeaderTitle = styled_components.default.div`
+  flex: 1;
+`;
 const ModalTrigger = react_aria_components.DialogTrigger;
 const ModalContent = StyledModal;
 const ModalClose = (props) => {
@@ -151,6 +152,16 @@ const ModalTitle = ({ children, ...props }) => {
 		children
 	});
 };
+const ModalHeader = (0, styled_components.default)(require_Stack.HStack)`
+  border-bottom: ${({ $hasTabs }) => $hasTabs ? "none" : `1px solid ${_persona_design_tokens.Color.BorderDivider}`};
+  padding: ${({ $hasTabs }) => $hasTabs ? `${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[4]}` : `${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[4]}`};
+`;
+const ModalTabBar = (0, styled_components.default)(require_TabBar.TabBar)`
+  padding-left: ${_persona_design_tokens.Spacing[4]};
+`;
+const StyledDialog = (0, styled_components.default)(react_aria_components.Dialog)`
+  outline: none;
+`;
 const StyledCard = (0, styled_components.default)(require_Card.Card_default)`
   position: relative;
   left: 50%;
@@ -192,33 +203,26 @@ const StyledModalCardBody = (0, styled_components.default)(require_Card.Card_def
 /**
 * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
 */
-const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props }, ref) {
+const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
 	const [selectedTabIdx, setSelectedTabIdx] = (0, react.useState)(0);
-	const titleAndClose = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
+	(0, react.useEffect)(() => {
+		setSelectedTabIdx(0);
+	}, [tabs?.length ?? 0]);
+	const titleAndClose = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalHeader, {
 		justify: "flex-start",
 		align: "center",
 		spacing: _persona_design_tokens.Spacing[2],
-		css: {
-			borderBottom: tabs ? "none" : `1px solid ${_persona_design_tokens.Color.BorderDivider}`,
-			padding: tabs ? `${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[4]}` : `${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[4]}`
-		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			css: { flex: 1 },
-			children: title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalTitle, { children: title }) : null
-		}), showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalClose, { "aria-label": "Close" })]
+		$hasTabs: Boolean(tabs),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalHeaderTitle, { children: title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalTitle, { children: title }) : null }), showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalClose, { "aria-label": "Close" })]
 	});
-	const modalHeader = tabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, { children: [titleAndClose, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabBar.TabBar, {
-		css: { paddingLeft: _persona_design_tokens.Spacing[4] },
-		children: tabs.map((tab, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabBar.Tab, {
-			selected: selectedTabIdx === idx,
-			id: `pds-modal_tab-${idx}`,
-			onClick: () => setSelectedTabIdx(idx),
-			"aria-controls": `pds-modal_tab-panel-${idx}`,
-			children: tab.name
-		}, tab.name))
-	})] }) : titleAndClose;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Dialog, {
-		css: { outline: "none" },
+	const modalHeader = tabs ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, { children: [titleAndClose, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalTabBar, { children: tabs.map((tab, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TabBar.Tab, {
+		selected: selectedTabIdx === idx,
+		id: `pds-modal_tab-${idx}`,
+		onClick: () => setSelectedTabIdx(idx),
+		"aria-controls": `pds-modal_tab-panel-${idx}`,
+		children: tab.name
+	}, tab.name)) })] }) : titleAndClose;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDialog, {
 		...props,
 		ref,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCard, {
@@ -232,7 +236,7 @@ const ModalCard = (0, react.forwardRef)(function ModalCard({ title, children, sh
 					role: tabs ? "tabpanel" : void 0,
 					id: `pds-modal_tab-panel-${tab.name}`,
 					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: tab.contents
+					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
 				}, tab.name)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledModalCardBody, {
 					$noPadding: noBodyPadding,
 					role: tabs ? "tabpanel" : void 0,
@@ -256,6 +260,7 @@ const Modal = ({ children, trigger, contentProps, noBodyPadding = false, size =
 		tabs,
 		noBodyPadding,
 		...contentProps,
+		portalContainer,
 		children: typeof children === "function" ? children({ portalContainer }) : children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.DialogTrigger, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["ModalOverlay","AriaModal","Button","Spacing","HStack","Color","DialogTrigger","AriaButton","XIcon","Heading","AriaHeading","Card","Stack","TabBar","Tab","Dialog","Pressable"],"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 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 type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, 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 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\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\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 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   */\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\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, ModalCardProps>(function ModalCard(\n  { title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props },\n  ref,\n) {\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n\n  const titleAndClose = (\n    <HStack\n      justify='flex-start'\n      align='center'\n      spacing={Spacing[2]}\n      css={{\n        borderBottom: tabs ? 'none' : `1px solid ${Color.BorderDivider}`,\n        padding: tabs\n          ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n          : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`,\n      }}\n    >\n      <div css={{ flex: 1 }}>{title ? <ModalTitle>{title}</ModalTitle> : null}</div>\n      {showCloseButton && <ModalClose aria-label='Close' />}\n    </HStack>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <TabBar css={{ paddingLeft: Spacing[4] }}>\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      </TabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <Dialog css={{ outline: 'none' }} {...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              {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    </Dialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: JSX.Element;\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?: ReactNode | ((props: { portalContainer: HTMLDivElement | null }) => ReactNode);\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    >\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.cjs","names":["ModalOverlay","AriaModal","Button","Spacing","HStack","Color","DialogTrigger","AriaButton","XIcon","Heading","AriaHeading","TabBar","Dialog","Card","Stack","Tab","Pressable"],"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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"}

package/dist/components/Modal/index.d.cts

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger } from "../../Modal.cjs";
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.cjs";
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

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

@@ -1,2 +1,2 @@
-import _default, { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
-export { ModalClose, ModalContent, ModalProps, ModalTitleProps, ModalTrigger, _default as default };
+import _default, { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger } from "../../Modal.mjs";
+export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

@@ -1,15 +1,13 @@
-import { n as Stack, t as HStack } from "../../Stack-hwgS2FU1.mjs";
-import "../Stack/index.mjs";
-import { t as Card_default } from "../../Card-DeJSt5ys.mjs";
-import { n as Heading$1 } from "../../Text-DOTYjIt0.mjs";
-import { n as Button$1 } from "../../IconButton-C28qxOdi.mjs";
-import "../Button/index.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-Bf89XksH.mjs";
+import { t as Card_default } from "../../Card-CLTkZLKr.mjs";
+import { n as Heading$1 } from "../../Text-hEoPeOc9.mjs";
+import { n as Stack, t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { n as Button$1 } from "../../IconButton-DC4rh6ow.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-ByusqAXF.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 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";
 //#region lib/useModalInsetRight.ts
 const CSS_VAR = "--modal-inset-right";
@@ -117,6 +115,9 @@ const ModalFooter = styled(HStack).attrs({
   padding: ${Spacing[3]} ${Spacing[4]};
   border-top: 1px solid ${Color.BorderDivider};
 `;
+const ModalHeaderTitle = styled.div`
+  flex: 1;
+`;
 const ModalTrigger = DialogTrigger;
 const ModalContent = StyledModal;
 const ModalClose = (props) => {
@@ -145,6 +146,16 @@ const ModalTitle = ({ children, ...props }) => {
 		children
 	});
 };
+const ModalHeader = styled(HStack)`
+  border-bottom: ${({ $hasTabs }) => $hasTabs ? "none" : `1px solid ${Color.BorderDivider}`};
+  padding: ${({ $hasTabs }) => $hasTabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};
+`;
+const ModalTabBar = styled(TabBar)`
+  padding-left: ${Spacing[4]};
+`;
+const StyledDialog = styled(Dialog)`
+  outline: none;
+`;
 const StyledCard = styled(Card_default)`
   position: relative;
   left: 50%;
@@ -186,33 +197,26 @@ const StyledModalCardBody = styled(Card_default.Body)`
 /**
 * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.
 */
-const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, ...props }, ref) {
+const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButton = true, size, footer, tabs, noBodyPadding = false, portalContainer, ...props }, ref) {
 	const [selectedTabIdx, setSelectedTabIdx] = useState(0);
-	const titleAndClose = /* @__PURE__ */ jsxs(HStack, {
+	useEffect(() => {
+		setSelectedTabIdx(0);
+	}, [tabs?.length ?? 0]);
+	const titleAndClose = /* @__PURE__ */ jsxs(ModalHeader, {
 		justify: "flex-start",
 		align: "center",
 		spacing: Spacing[2],
-		css: {
-			borderBottom: tabs ? "none" : `1px solid ${Color.BorderDivider}`,
-			padding: tabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			css: { flex: 1 },
-			children: title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null
-		}), showCloseButton && /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close" })]
+		$hasTabs: Boolean(tabs),
+		children: [/* @__PURE__ */ jsx(ModalHeaderTitle, { children: title ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null }), showCloseButton && /* @__PURE__ */ jsx(ModalClose, { "aria-label": "Close" })]
 	});
-	const modalHeader = tabs ? /* @__PURE__ */ jsxs(Stack, { children: [titleAndClose, /* @__PURE__ */ jsx(TabBar, {
-		css: { paddingLeft: Spacing[4] },
-		children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Tab, {
-			selected: selectedTabIdx === idx,
-			id: `pds-modal_tab-${idx}`,
-			onClick: () => setSelectedTabIdx(idx),
-			"aria-controls": `pds-modal_tab-panel-${idx}`,
-			children: tab.name
-		}, tab.name))
-	})] }) : titleAndClose;
-	return /* @__PURE__ */ jsx(Dialog, {
-		css: { outline: "none" },
+	const modalHeader = tabs ? /* @__PURE__ */ jsxs(Stack, { children: [titleAndClose, /* @__PURE__ */ jsx(ModalTabBar, { children: tabs.map((tab, idx) => /* @__PURE__ */ jsx(Tab, {
+		selected: selectedTabIdx === idx,
+		id: `pds-modal_tab-${idx}`,
+		onClick: () => setSelectedTabIdx(idx),
+		"aria-controls": `pds-modal_tab-panel-${idx}`,
+		children: tab.name
+	}, tab.name)) })] }) : titleAndClose;
+	return /* @__PURE__ */ jsx(StyledDialog, {
 		...props,
 		ref,
 		children: /* @__PURE__ */ jsxs(StyledCard, {
@@ -226,7 +230,7 @@ const ModalCard = forwardRef(function ModalCard({ title, children, showCloseButt
 					role: tabs ? "tabpanel" : void 0,
 					id: `pds-modal_tab-panel-${tab.name}`,
 					"aria-labelledby": `pds-modal_tab-${tab.name}`,
-					children: tab.contents
+					children: typeof tab.contents === "function" ? tab.contents({ portalContainer }) : tab.contents
 				}, tab.name)) : /* @__PURE__ */ jsx(StyledModalCardBody, {
 					$noPadding: noBodyPadding,
 					role: tabs ? "tabpanel" : void 0,
@@ -250,6 +254,7 @@ const Modal$1 = ({ children, trigger, contentProps, noBodyPadding = false, size
 		tabs,
 		noBodyPadding,
 		...contentProps,
+		portalContainer,
 		children: typeof children === "function" ? children({ portalContainer }) : children
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {