@persona/design-system 0.3.0 → 0.4.0

package/dist/codec-B0dZTwlG.d.mts

@@ -0,0 +1,29 @@
+import { a as DateFilterPreset, c as RelativeDateFilterValue, n as AbsoluteDateRange, o as DateFilterValue } from "./types-Bsf1VsW6.mjs";
+import { DateTime } from "luxon";
+
+//#region lib/date-filter/codec.d.ts
+declare function parseDateFilterValue(raw: unknown): DateFilterValue | null;
+declare function resolveDateFilterValue(value: RelativeDateFilterValue, context?: {
+  zone?: string;
+  now?: DateTime;
+}): Required<AbsoluteDateRange>;
+declare function resolveDateFilterValue(value: DateFilterValue, context?: {
+  zone?: string;
+  now?: DateTime;
+}): AbsoluteDateRange;
+/**
+ * Which preset a control should render as selected.
+ *
+ * Only stored metadata makes a value semantic. Once writes are enabled an absolute
+ * value means the user picked dates, so inferring a preset from them would relabel
+ * their choice; with writes disabled no metadata is ever stored, so inference is
+ * the only thing that can highlight a preset at all.
+ *
+ * `undefined` asks the picker to infer from the dates, `null` selects nothing.
+ */
+declare function selectedPresetFor(value: DateFilterValue | null, writesEnabled: boolean): DateFilterPreset | null | undefined;
+declare function isRelative(value: DateFilterValue): value is RelativeDateFilterValue;
+declare function formatDateFilterValue(value: DateFilterValue): string | null;
+//#endregion
+export { selectedPresetFor as a, resolveDateFilterValue as i, isRelative as n, parseDateFilterValue as r, formatDateFilterValue as t };
+//# sourceMappingURL=codec-B0dZTwlG.d.mts.map

package/dist/codec.d.mts

@@ -0,0 +1,2 @@
+import { a as selectedPresetFor, i as resolveDateFilterValue, n as isRelative, r as parseDateFilterValue, t as formatDateFilterValue } from "./codec-B0dZTwlG.mjs";
+export { formatDateFilterValue, isRelative, parseDateFilterValue, resolveDateFilterValue, selectedPresetFor };

package/dist/components/Attribute/index.mjs

@@ -1,11 +1,11 @@
-import { i as Paragraph } from "../../Text-RcEfNFLx.mjs";
-import { r as HelperTooltip } from "../../Tooltip-BvDbmXak.mjs";
-import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
-import { n as Sticker } from "../../Sticker-xtDMuOoN.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
+import { r as HelperTooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
+import { n as Sticker } from "../../Sticker-CQ6sOKUj.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { EyeIcon, EyeOffIcon } from "@persona/icons";
 import { repeat, uniqueId } from "lodash-es";
 import { useToggleButton } from "react-aria";
@@ -51,7 +51,7 @@ const Value = styled.dd`
 `;
 const AttributeValue = ({ placeholder, show, redacted, value, wordBreak, size, id, "aria-labelledby": ariaLabelledBy }) => {
 	const isEmpty = value == null || value === "";
-	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ jsx(Fragment, { children: !show ? repeat("•", typeof value === "string" ? value.length : 8) : value });
+	const renderedVal = isEmpty ? placeholder : /* @__PURE__ */ jsx(Fragment$1, { children: !show ? repeat("•", typeof value === "string" ? value.length : 8) : value });
 	return /* @__PURE__ */ jsx(Value, {
 		isPlaceholder: isEmpty,
 		wordBreak,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${Color.CorePurple800};\n    }\n  }\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder }) => (isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => theme.color.text.brand};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => theme.color.text.brand};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Attribute/Attribute.tsx","../../../components/Attribute/AttributeGrid.tsx"],"sourcesContent":["import { repeat, uniqueId } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useToggleButton } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { EyeIcon, EyeOffIcon } from '@persona/icons';\nimport IconButton from 'design-system/components/Button/IconButton';\nimport Sticker from 'design-system/components/Sticker';\nimport { Paragraph } from 'design-system/components/Text';\nimport { HelperTooltip } from 'design-system/components/Tooltip';\nimport type { ParagraphSize } from 'design-system/mixins/text';\n\nexport type WordBreak = 'break-all' | 'break-word' | 'normal';\nexport type TextTransform = 'capitalize' | 'sentence';\nexport type TableLayoutValue = boolean | 'full-width';\n\nexport type AttributeSize = 'sm' | 'md';\n\nexport const AttributeContext = createContext<{\n  table?: TableLayoutValue;\n  horizontal?: boolean;\n  size?: AttributeSize;\n}>({});\n\n// TODO: Create Toggle Button component\nexport const IconButtonContainer = styled(IconButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    transition-duration: 150ms;\n  }\n\n  :hover {\n    svg {\n      color: ${Color.CorePurple800};\n    }\n  }\n`;\n\ninterface AttributeValueProps {\n  placeholder: ReactNode;\n  show?: boolean;\n  redacted?: boolean;\n  value?: ReactNode;\n  textTransform?: TextTransform;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n  'aria-labelledby': string;\n  id: string;\n}\n\ninterface ValueFormatterProps {\n  isPlaceholder?: boolean;\n  wordBreak?: WordBreak;\n  size?: AttributeSize;\n}\n\nconst Value = styled.dd<ValueFormatterProps>`\n  ${({ size }) => (size === 'sm' ? Typography.TextSmall : Typography.TextMedium)};\n  color: ${({ isPlaceholder }) => (isPlaceholder ? Color.TextSecondary : Color.CoreSlate1000)};\n  margin: 0;\n  text-overflow: ellipsis;\n  overflow-x: hidden;\n  word-break: ${({ wordBreak }) => (wordBreak ? wordBreak : 'normal')};\n\n  ul,\n  ol {\n    list-style-position: inside;\n  }\n\n  a {\n    color: ${({ theme }) => theme.color.text.brand};\n    text-decoration: none;\n\n    &:visited {\n      color: ${({ theme }) => theme.color.text.brand};\n    }\n  }\n`;\n\nexport const AttributeValue = ({\n  placeholder,\n  show,\n  redacted,\n  value,\n  wordBreak,\n  size,\n  id,\n  'aria-labelledby': ariaLabelledBy,\n}: AttributeValueProps) => {\n  const isEmpty = value == null || value === '';\n\n  const renderedVal = isEmpty ? (\n    placeholder\n  ) : (\n    <>{!show ? repeat('•', typeof value === 'string' ? value.length : 8) : value}</>\n  );\n\n  return (\n    <Value\n      isPlaceholder={isEmpty}\n      wordBreak={wordBreak}\n      size={size}\n      title={typeof value === 'string' ? value : undefined}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n    >\n      {redacted ? <Sticker id={id}>Redacted</Sticker> : renderedVal}\n    </Value>\n  );\n};\n\nexport interface AttributeProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Title of the attribute. Rendered as a <dt>.\n   */\n  label: ReactNode;\n\n  /**\n   * Value to display. Rendered as a <dd>.\n   */\n  value?: ReactNode;\n\n  /**\n   * Will display a \"Redacted\" sticker if there is a value.\n   */\n  redacted?: boolean;\n\n  /**\n   * Renders toggleable eye button to the right of the label\n   */\n  toggleable?: boolean;\n\n  /**\n   * Text to display in presence of null value.\n   */\n  placeholder?: string;\n\n  /**\n   * Word break styling for value.\n   */\n  wordBreak?: WordBreak;\n\n  /**\n   * Render a custom label component\n   */\n  labelComponent?: FC<PropsWithChildren<{ id: string; size?: ParagraphSize }>>;\n\n  /**\n   * Render a custom value component\n   */\n  valueComponent?: ComponentType<AttributeValueProps>;\n\n  /**\n   * Renders a HelperTooltip to display help text to the right of the label.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * Custom adornments to display to the right of the label.\n   */\n  right?: ReactNode;\n\n  /**\n   * Renders attributes in a tabular layout.\n   */\n  table?: TableLayoutValue;\n}\n\ntype AttributeContainerProps = {\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeContainer = styled('div')<AttributeContainerProps>`\n  ${({ table, size }) =>\n    table &&\n    css`\n      display: table-row;\n\n      > * {\n        display: table-cell;\n      }\n\n      & > ${AttributeLabel} {\n        padding: ${Spacing[1]} 0;\n        padding-right: ${size === 'sm' ? Spacing[2] : Spacing[3]};\n      }\n      & > ${Value} {\n        padding: ${size === 'sm' ? Spacing[1] : Spacing[2]} 0;\n      }\n    `}\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: grid;\n      gap: ${Spacing[4]};\n      grid-template-columns: subgrid;\n      grid-column: span 2;\n    `}\n`;\n\nexport const AttributeLabel = styled(Paragraph).attrs<{ size?: ParagraphSize }>((props) => ({\n  size: props.size ?? 'md',\n  color: 'tertiary',\n  as: 'dt',\n}))`\n  margin: 0;\n  overflow-wrap: break-word;\n`;\n\nconst RightContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: ${Spacing[2]};\n`;\n\nexport const Attribute = ({\n  label,\n  value,\n  redacted,\n  placeholder = '-',\n  wordBreak,\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  labelComponent: LabelComponent = AttributeLabel,\n  valueComponent: ValueComponent = AttributeValue,\n  right,\n  helpText,\n  toggleable,\n  table,\n  ...elemProps\n}: AttributeProps) => {\n  const attrCtx = useContext(AttributeContext);\n  const size = attrCtx?.size ?? 'md';\n  const toggleRef = useRef();\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  const valueAsArray = [].concat(value).filter(Boolean);\n  const showToggleButton = toggleable && !redacted && valueAsArray.length > 0;\n  const state = useToggleState({ defaultSelected: !toggleable });\n  const { buttonProps } = useToggleButton(\n    {\n      'aria-label': state.isSelected ? `Hide ${label} value` : `Show ${label} value`,\n      elementType: 'button',\n    },\n    state,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    toggleRef,\n  );\n  const labelId = useMemo(() => uniqueId('pds_attribute_label__'), []);\n  const valueId = useMemo(() => uniqueId('pds_attribute_value__'), []);\n  const show = state.isSelected;\n\n  useEffect(() => {\n    state.setSelected(!toggleable);\n  }, [toggleable]);\n\n  return (\n    <AttributeContainer\n      table={table || attrCtx?.table}\n      horizontal={attrCtx?.horizontal}\n      size={size}\n      {...elemProps}\n    >\n      <LabelComponent id={labelId} aria-details={valueId} size={size}>\n        {label}\n        {helpText && (\n          <RightContainer>\n            <HelperTooltip size='sm'>{helpText}</HelperTooltip>\n          </RightContainer>\n        )}\n        {showToggleButton && (\n          <RightContainer>\n            {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n            <IconButtonContainer {...buttonProps} ref={toggleRef}>\n              {show ? <EyeIcon /> : <EyeOffIcon />}\n            </IconButtonContainer>\n          </RightContainer>\n        )}\n        {right && <RightContainer>{right}</RightContainer>}\n      </LabelComponent>\n      <ValueComponent\n        id={valueId}\n        value={value}\n        placeholder={placeholder}\n        wordBreak={wordBreak}\n        redacted={redacted}\n        show={show}\n        size={size}\n        aria-labelledby={labelId}\n      />\n    </AttributeContainer>\n  );\n};\n\nexport default Attribute;\n","import type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { AttributeContext, type AttributeSize, type TableLayoutValue } from './Attribute';\n\ntype AttributeGridProps = {\n  children?: ReactNode;\n  /**\n   * Sets the font size and spacing density for all child Attributes.\n   * Defaults to `'md'`.\n   */\n  size?: AttributeSize;\n} & (\n  | {\n      /**\n       * Set a fixed number of columns for the grid.\n       */\n      colCount?: number;\n      /**\n       * Display attributes in a stacked list with label first then value.\n       */\n      horizontal?: boolean;\n\n      table?: never;\n    }\n  | {\n      /**\n       * Display attributes in a fixed tabular layout.\n       * Set to `full-width` to expand to full width of container.\n       */\n      table?: TableLayoutValue;\n\n      colCount?: never;\n      horizontal?: never;\n    }\n);\n\ntype AttributeGridComponentProps = {\n  colCount?: number;\n  horizontal?: boolean;\n  table?: TableLayoutValue;\n  size?: AttributeSize;\n};\nconst AttributeGridComponent = styled.dl<AttributeGridComponentProps>`\n  ${({ colCount, table, horizontal, size }) =>\n    table\n      ? css`\n          display: table;\n          ${\n            table === 'full-width' &&\n            css`\n            width: 100%;\n            table-layout: fixed;\n            border-spacing: 0 ${size === 'sm' ? Spacing[1] : Spacing[2]};\n          `\n          };\n        `\n      : css`\n          display: grid;\n          gap: ${size === 'sm' ? Spacing[2] : Spacing[4]};\n          /* If the layout is horizontal we guarentee an even number of columns */\n          grid-template-columns: ${\n            colCount\n              ? `repeat(${colCount}, ${horizontal ? '1fr 2fr' : '1fr'})`\n              : `repeat(auto-fit, ${horizontal ? 'minmax(120px, 1fr) minmax(225px, 2fr)' : 'minmax(225px, 1fr)'})`\n          };\n        `}\n  margin: 0;\n\n  & + & {\n    padding-bottom: ${Spacing[5]};\n  }\n`;\n\nconst AttributeGrid = ({ children, horizontal, table, size, ...props }: AttributeGridProps) => {\n  return (\n    <AttributeGridComponent table={table} horizontal={horizontal} size={size} {...props}>\n      <AttributeContext.Provider value={{ horizontal, table, size }}>\n        {children}\n      </AttributeContext.Provider>\n    </AttributeGridComponent>\n  );\n};\n\nexport default AttributeGrid;\n"],"mappings":"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"}

package/dist/components/Badge/index.mjs

@@ -1,2 +1,2 @@
-import { t as Badge } from "../../Badge-BqS6Nk4J.mjs";
+import { t as Badge } from "../../Badge-BL0J5oMa.mjs";
 export { Badge, Badge as default };

package/dist/components/Banner/index.mjs

@@ -1,8 +1,8 @@
-import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { n as Button } from "../../IconButton-BfDlic2K.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { n as Button } from "../../IconButton-BgL3QUVO.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@persona/icons";
 import { useFocusVisible } from "react-aria";

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

@@ -0,0 +1,2 @@
+import BottomPanel, { BottomPanelHandle, BottomPanelItemProps, BottomPanelProps } from "../../BottomPanel.mjs";
+export { type BottomPanelHandle, type BottomPanelItemProps, type BottomPanelProps, BottomPanel as default };

package/dist/components/BottomPanel/index.mjs

@@ -0,0 +1,293 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { useResizablePanel } from "../../lib/useResizablePanel.mjs";
+import { Z_INDICES } from "../../lib/zindex.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
+import { t as Badge } from "../../Badge-BL0J5oMa.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-B5NtgtgC.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from "@persona/icons";
+import { useId } from "react-aria";
+//#region components/BottomPanel/ResizeHandle.tsx
+const DRAGGING_CLASSNAME = "dragging";
+const ResizeHandleContainer = styled.div`
+  cursor: row-resize;
+  position: absolute;
+  height: ${Spacing[2]};
+  top: -${Spacing[1]};
+  left: 0;
+  right: 0;
+  z-index: ${Z_INDICES.dropdown};
+  touch-action: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: ${Spacing[1]};
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: transparent;
+    transition: background-color 0.15s ease-in;
+    transition-delay: 0.025s;
+  }
+
+  &:hover::after,
+  &.${DRAGGING_CLASSNAME}::after {
+    background-color: ${({ theme }) => theme.color.border.active};
+  }
+`;
+/** Vertical resize handle pinned to the top edge of a bottom-anchored panel. */
+const ResizeHandle = ({ ariaLabel, onDoubleClick, onMoveTo, onRelease, panelRef }) => {
+	const resizeHandleRef = useRef(null);
+	const panelOffsetRef = useRef(0);
+	const activePointerIdRef = useRef(null);
+	const documentListenersRef = useRef(null);
+	const onMoveToRef = useRef(onMoveTo);
+	const onReleaseRef = useRef(onRelease);
+	onMoveToRef.current = onMoveTo;
+	onReleaseRef.current = onRelease;
+	const removeDocumentListeners = () => {
+		const listeners = documentListenersRef.current;
+		if (!listeners) return;
+		document.removeEventListener("pointermove", listeners.handleMove);
+		document.removeEventListener("pointerup", listeners.handleEnd);
+		document.removeEventListener("pointercancel", listeners.handleEnd);
+		documentListenersRef.current = null;
+	};
+	const endDrag = (pointerId) => {
+		if (activePointerIdRef.current !== pointerId) return;
+		activePointerIdRef.current = null;
+		removeDocumentListeners();
+		try {
+			resizeHandleRef.current?.releasePointerCapture(pointerId);
+		} catch {}
+		resizeHandleRef.current?.classList.remove(DRAGGING_CLASSNAME);
+		panelOffsetRef.current = 0;
+		onReleaseRef.current?.();
+	};
+	const handleDocumentPointerMove = (event) => {
+		if (activePointerIdRef.current !== event.pointerId) return;
+		onMoveToRef.current(event.clientY + panelOffsetRef.current);
+	};
+	const addDocumentListeners = () => {
+		removeDocumentListeners();
+		const listeners = {
+			handleEnd: (event) => endDrag(event.pointerId),
+			handleMove: handleDocumentPointerMove
+		};
+		documentListenersRef.current = listeners;
+		document.addEventListener("pointermove", listeners.handleMove);
+		document.addEventListener("pointerup", listeners.handleEnd);
+		document.addEventListener("pointercancel", listeners.handleEnd);
+	};
+	const endDragRef = useRef(endDrag);
+	endDragRef.current = endDrag;
+	useEffect(() => {
+		return () => {
+			const activePointerId = activePointerIdRef.current;
+			if (activePointerId != null) endDragRef.current(activePointerId);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(ResizeHandleContainer, {
+		"aria-label": ariaLabel,
+		onDoubleClick,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				onDoubleClick?.();
+				e.preventDefault();
+			}
+		},
+		onLostPointerCapture: (e) => endDrag(e.pointerId),
+		onPointerCancel: (e) => endDrag(e.pointerId),
+		onPointerDown: (e) => {
+			if (e.button !== 0 || activePointerIdRef.current != null) return;
+			const panelRect = panelRef.current?.getBoundingClientRect();
+			panelOffsetRef.current = panelRect ? panelRect.top - e.clientY : 0;
+			activePointerIdRef.current = e.pointerId;
+			resizeHandleRef.current?.classList.add(DRAGGING_CLASSNAME);
+			addDocumentListeners();
+			try {
+				resizeHandleRef.current?.setPointerCapture(e.pointerId);
+			} catch {}
+			e.preventDefault();
+			e.stopPropagation();
+		},
+		onPointerUp: (e) => endDrag(e.pointerId),
+		ref: resizeHandleRef,
+		role: "button",
+		tabIndex: 0
+	});
+};
+//#endregion
+//#region components/BottomPanel/ResizableVerticalPanel.tsx
+const TriStatePanel = styled.div.attrs(({ customHeight, minHeight, panelState }) => ({ style: { height: panelState === "maximized" ? "100%" : `${customHeight ?? minHeight}px` } }))`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: ${({ theme }) => theme.color.background.primary};
+  position: relative;
+  min-height: ${({ minHeight }) => minHeight}px;
+  width: 100%;
+  border-top: 1px solid ${Color.BorderDivider};
+  z-index: ${Z_INDICES.topNav};
+`;
+const TopRowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  box-shadow: inset 0px -1px 0px 0px ${Color.BorderDivider};
+`;
+const TopRightIconsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0 ${Spacing[2]};
+  gap: ${Spacing[2]};
+  flex-direction: row;
+`;
+const ContentContainer = styled.div`
+  /* offset by the top row container height */
+  height: calc(100% - ${Spacing[6]});
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`;
+/**
+* Bottom-anchored panel with a drag-to-resize top edge, a header row, and
+* maximize/minimize/close controls.
+*/
+const ResizableVerticalPanel = ({ children, headerContent, hookState, minHeight }) => {
+	const { collapse, handleDragMove: handlePanelDragMove, handleDragRelease, maximize, panelState, restore, size, toggleMaximized } = hookState;
+	const panelRef = useRef(null);
+	const showControls = size != null && size > minHeight || panelState === "maximized";
+	const handleDragMove = (clientY) => {
+		const panel = panelRef.current;
+		const container = panel?.parentElement;
+		if (!panel || !container) return;
+		const panelBottom = panel.getBoundingClientRect().bottom;
+		const containerTop = container.getBoundingClientRect().top;
+		handlePanelDragMove(panelBottom - clientY, panelBottom - containerTop);
+	};
+	return /* @__PURE__ */ jsxs(TriStatePanel, {
+		"aria-label": "Bottom panel",
+		customHeight: size,
+		minHeight,
+		panelState,
+		ref: panelRef,
+		role: "region",
+		children: [
+			/* @__PURE__ */ jsx(ResizeHandle, {
+				ariaLabel: "Drag to resize bottom panel",
+				onDoubleClick: toggleMaximized,
+				onMoveTo: handleDragMove,
+				onRelease: handleDragRelease,
+				panelRef
+			}),
+			/* @__PURE__ */ jsxs(TopRowContainer, { children: [headerContent, showControls && /* @__PURE__ */ jsxs(TopRightIconsContainer, { children: [panelState === "maximized" ? /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Restore the bottom panel",
+				onClick: restore,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(ArrowCollapseIcon, {})
+			}) : /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Maximize the bottom panel",
+				onClick: maximize,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(ArrowExpandIcon, {})
+			}), /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Close bottom panel",
+				onClick: collapse,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})] })] }),
+			/* @__PURE__ */ jsx(ContentContainer, { children })
+		]
+	});
+};
+//#endregion
+//#region components/BottomPanel/BottomPanel.tsx
+const PANEL_MIN_HEIGHT = 33;
+const OPEN_HEIGHT = 200;
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: ${Spacing[4]};
+`;
+const HeaderTabBar = styled(TabBar)`
+  border-bottom: none;
+`;
+const PanelContent = styled.div`
+  ${({ $hidden }) => $hidden ? css`
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          visibility: hidden;
+          pointer-events: none;
+        ` : css`
+          display: flex;
+          flex-direction: column;
+          flex: 1 1 auto;
+          min-height: 0;
+        `}
+`;
+/**
+* Resizable drawer anchored to the bottom of its container with one tab per
+* panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;
+* the caller owns what each panel shows.
+*/
+const BottomPanel = forwardRef(function BottomPanel({ panels }, ref) {
+	const baseId = useId();
+	const [selected, setSelected] = useState(panels[0]?.label);
+	const hasSelected = panels.some((panel) => panel.label === selected);
+	const selectedLabel = hasSelected ? selected : panels[0]?.label;
+	useEffect(() => {
+		if (!hasSelected) setSelected(selectedLabel);
+	}, [hasSelected, selectedLabel]);
+	const resizablePanelState = useResizablePanel({
+		initialSize: PANEL_MIN_HEIGHT,
+		minSize: PANEL_MIN_HEIGHT
+	});
+	const { expandTo, panelState, size } = resizablePanelState;
+	const openPanel = useCallback((label) => {
+		if (panelState === "drawer" && (size == null || size <= PANEL_MIN_HEIGHT)) expandTo(OPEN_HEIGHT);
+		setSelected(label);
+	}, [
+		expandTo,
+		panelState,
+		size
+	]);
+	useImperativeHandle(ref, () => ({ openPanel: (label) => {
+		if (panels.some((panel) => panel.label === label)) openPanel(label);
+	} }), [openPanel, panels]);
+	return /* @__PURE__ */ jsx(ResizableVerticalPanel, {
+		headerContent: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderTabBar, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(Tab, {
+			"aria-controls": `${baseId}-panel-${index}`,
+			badge: panel.badge ? /* @__PURE__ */ jsx(Badge, { children: panel.badge }) : void 0,
+			id: `${baseId}-tab-${index}`,
+			onClick: () => openPanel(panel.label),
+			selected: selectedLabel === panel.label,
+			children: panel.label
+		}, panel.label)) }) }),
+		hookState: resizablePanelState,
+		minHeight: PANEL_MIN_HEIGHT,
+		children: panels.map((panel, index) => {
+			const isSelected = selectedLabel === panel.label;
+			return /* @__PURE__ */ jsx(PanelContent, {
+				$hidden: !isSelected,
+				"aria-hidden": !isSelected,
+				"aria-labelledby": `${baseId}-tab-${index}`,
+				id: `${baseId}-panel-${index}`,
+				role: "tabpanel",
+				children: panel.content
+			}, panel.label);
+		})
+	});
+});
+//#endregion
+export { BottomPanel as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/BottomPanel/ResizeHandle.tsx","../../../components/BottomPanel/ResizableVerticalPanel.tsx","../../../components/BottomPanel/BottomPanel.tsx"],"sourcesContent":["import { type FC, type RefObject, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Spacing } from '@persona/design-tokens';\n\nconst DRAGGING_CLASSNAME = 'dragging';\n\ninterface ResizeHandleProps {\n  ariaLabel: string;\n  /** Fires on double-click or Enter/Space so the host can toggle/reset the size. */\n  onDoubleClick?: () => void;\n  /** Called on each pointer move with the new top edge position (clientY) in px. */\n  onMoveTo: (position: number) => void;\n  /** Called once when the drag ends (pointerup, cancel, or lost capture). */\n  onRelease?: () => void;\n  /** The panel being resized; its edge seeds the grab offset so the handle doesn't jump. */\n  panelRef: RefObject<HTMLDivElement>;\n}\n\n// The visible line is 2px tall on the panel's top border; the hitbox is Spacing[2] tall and\n// straddles that border so it is easy to grab without covering the header row's controls.\nconst ResizeHandleContainer = styled.div`\n  cursor: row-resize;\n  position: absolute;\n  height: ${Spacing[2]};\n  top: -${Spacing[1]};\n  left: 0;\n  right: 0;\n  z-index: ${Z_INDICES.dropdown};\n  touch-action: none;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: ${Spacing[1]};\n    left: 0;\n    right: 0;\n    height: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &.${DRAGGING_CLASSNAME}::after {\n    background-color: ${({ theme }) => theme.color.border.active};\n  }\n`;\n\n/** Vertical resize handle pinned to the top edge of a bottom-anchored panel. */\nexport const ResizeHandle: FC<ResizeHandleProps> = ({\n  ariaLabel,\n  onDoubleClick,\n  onMoveTo,\n  onRelease,\n  panelRef,\n}) => {\n  const resizeHandleRef = useRef<HTMLDivElement>(null);\n  const panelOffsetRef = useRef(0);\n  const activePointerIdRef = useRef<number | null>(null);\n  const documentListenersRef = useRef<{\n    handleEnd: (event: PointerEvent) => void;\n    handleMove: (event: PointerEvent) => void;\n  } | null>(null);\n  // Document listeners are registered once per drag; reading the callbacks through\n  // refs keeps them on the latest props without re-registering mid-drag.\n  const onMoveToRef = useRef(onMoveTo);\n  const onReleaseRef = useRef(onRelease);\n  onMoveToRef.current = onMoveTo;\n  onReleaseRef.current = onRelease;\n\n  const removeDocumentListeners = () => {\n    const listeners = documentListenersRef.current;\n    if (!listeners) {\n      return;\n    }\n\n    document.removeEventListener('pointermove', listeners.handleMove);\n    document.removeEventListener('pointerup', listeners.handleEnd);\n    document.removeEventListener('pointercancel', listeners.handleEnd);\n    documentListenersRef.current = null;\n  };\n\n  // Pointer capture routes events through the handle (including over iframes), but\n  // some surfaces still drop pointerup. Document-level listeners during an active\n  // drag are the release safety net. Only the pointer that started the drag may\n  // move or end it.\n  const endDrag = (pointerId: number) => {\n    if (activePointerIdRef.current !== pointerId) {\n      return;\n    }\n\n    activePointerIdRef.current = null;\n    removeDocumentListeners();\n    try {\n      resizeHandleRef.current?.releasePointerCapture(pointerId);\n    } catch {\n      // No active capture (or unsupported, e.g. jsdom) — nothing to release.\n    }\n\n    resizeHandleRef.current?.classList.remove(DRAGGING_CLASSNAME);\n    panelOffsetRef.current = 0;\n    onReleaseRef.current?.();\n  };\n\n  const handleDocumentPointerMove = (event: PointerEvent) => {\n    if (activePointerIdRef.current !== event.pointerId) {\n      return;\n    }\n\n    onMoveToRef.current(event.clientY + panelOffsetRef.current);\n  };\n\n  const addDocumentListeners = () => {\n    removeDocumentListeners();\n\n    const listeners = {\n      handleEnd: (event: PointerEvent) => endDrag(event.pointerId),\n      handleMove: handleDocumentPointerMove,\n    };\n    documentListenersRef.current = listeners;\n    document.addEventListener('pointermove', listeners.handleMove);\n    document.addEventListener('pointerup', listeners.handleEnd);\n    document.addEventListener('pointercancel', listeners.handleEnd);\n  };\n\n  const endDragRef = useRef(endDrag);\n  endDragRef.current = endDrag;\n  useEffect(() => {\n    return () => {\n      const activePointerId = activePointerIdRef.current;\n      if (activePointerId != null) {\n        endDragRef.current(activePointerId);\n      }\n    };\n  }, []);\n\n  return (\n    <ResizeHandleContainer\n      aria-label={ariaLabel}\n      onDoubleClick={onDoubleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          onDoubleClick?.();\n          e.preventDefault();\n        }\n      }}\n      onLostPointerCapture={(e) => endDrag(e.pointerId)}\n      onPointerCancel={(e) => endDrag(e.pointerId)}\n      onPointerDown={(e) => {\n        // Primary button / touch / pen only; ignore secondary and middle clicks,\n        // and a second pointer while a drag is already active.\n        if (e.button !== 0 || activePointerIdRef.current != null) {\n          return;\n        }\n        const panelRect = panelRef.current?.getBoundingClientRect();\n        panelOffsetRef.current = panelRect ? panelRect.top - e.clientY : 0;\n        activePointerIdRef.current = e.pointerId;\n        resizeHandleRef.current?.classList.add(DRAGGING_CLASSNAME);\n        addDocumentListeners();\n        try {\n          resizeHandleRef.current?.setPointerCapture(e.pointerId);\n        } catch {\n          // Pointer capture unsupported (e.g. jsdom) — document listeners still\n          // route move/up events for the duration of the drag.\n        }\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n      onPointerUp={(e) => endDrag(e.pointerId)}\n      ref={resizeHandleRef}\n      role='button'\n      tabIndex={0}\n    />\n  );\n};\n","import { type FC, type ReactNode, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { PanelState, type ResizablePanelState } from '@persona/design-system/lib/useResizablePanel';\nimport { Z_INDICES } from '@persona/design-system/lib/zindex';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowCollapseIcon, ArrowExpandIcon, XIcon } from '@persona/icons';\n\nimport { ResizeHandle } from './ResizeHandle';\n\ninterface ResizableVerticalPanelProps {\n  /** Panel body, rendered in the scrollable content area below the header. */\n  children: ReactNode;\n  /** Content for the header row, left of the maximize/minimize/close buttons. */\n  headerContent?: ReactNode;\n  /** State and drag/resize handlers from `useResizablePanel`. */\n  hookState: ResizablePanelState;\n  /** Minimum panel height in px. */\n  minHeight: number;\n}\n\nconst TriStatePanel = styled.div.attrs<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>(({ customHeight, minHeight, panelState }) => ({\n  style: {\n    height: panelState === PanelState.Maximized ? '100%' : `${customHeight ?? minHeight}px`,\n  },\n}))<{\n  customHeight: number | null;\n  minHeight: number;\n  panelState: PanelState;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: ${({ theme }) => theme.color.background.primary};\n  position: relative;\n  min-height: ${({ minHeight }) => minHeight}px;\n  width: 100%;\n  border-top: 1px solid ${Color.BorderDivider};\n  z-index: ${Z_INDICES.topNav};\n`;\n\nconst TopRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  box-shadow: inset 0px -1px 0px 0px ${Color.BorderDivider};\n`;\n\nconst TopRightIconsContainer = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 0 ${Spacing[2]};\n  gap: ${Spacing[2]};\n  flex-direction: row;\n`;\n\nconst ContentContainer = styled.div`\n  /* offset by the top row container height */\n  height: calc(100% - ${Spacing[6]});\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n`;\n\n/**\n * Bottom-anchored panel with a drag-to-resize top edge, a header row, and\n * maximize/minimize/close controls.\n */\nexport const ResizableVerticalPanel: FC<ResizableVerticalPanelProps> = ({\n  children,\n  headerContent,\n  hookState,\n  minHeight,\n}) => {\n  const {\n    collapse,\n    handleDragMove: handlePanelDragMove,\n    handleDragRelease,\n    maximize,\n    panelState,\n    restore,\n    size,\n    toggleMaximized,\n  } = hookState;\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Controls only make sense once the drawer is taller than its collapsed header.\n  const showControls = (size != null && size > minHeight) || panelState === PanelState.Maximized;\n  // Converts the dragged top edge (clientY) into a panel height bounded by the\n  // panel's container.\n  const handleDragMove = (clientY: number) => {\n    const panel = panelRef.current;\n    const container = panel?.parentElement;\n    if (!panel || !container) {\n      return;\n    }\n    const panelBottom = panel.getBoundingClientRect().bottom;\n    const containerTop = container.getBoundingClientRect().top;\n    handlePanelDragMove(panelBottom - clientY, panelBottom - containerTop);\n  };\n\n  return (\n    <TriStatePanel\n      aria-label='Bottom panel'\n      customHeight={size}\n      minHeight={minHeight}\n      panelState={panelState}\n      ref={panelRef}\n      role='region'\n    >\n      <ResizeHandle\n        ariaLabel='Drag to resize bottom panel'\n        onDoubleClick={toggleMaximized}\n        onMoveTo={handleDragMove}\n        onRelease={handleDragRelease}\n        panelRef={panelRef}\n      />\n\n      <TopRowContainer>\n        {headerContent}\n\n        {showControls && (\n          <TopRightIconsContainer>\n            {panelState === PanelState.Maximized ? (\n              <IconButton aria-label='Restore the bottom panel' onClick={restore} size='sm'>\n                <ArrowCollapseIcon />\n              </IconButton>\n            ) : (\n              <IconButton aria-label='Maximize the bottom panel' onClick={maximize} size='sm'>\n                <ArrowExpandIcon />\n              </IconButton>\n            )}\n            <IconButton aria-label='Close bottom panel' onClick={collapse} size='sm'>\n              <XIcon />\n            </IconButton>\n          </TopRightIconsContainer>\n        )}\n      </TopRowContainer>\n\n      <ContentContainer>{children}</ContentContainer>\n    </TriStatePanel>\n  );\n};\n","import {\n  forwardRef,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useState,\n} from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport Badge from '@persona/design-system/components/Badge';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { PanelState, useResizablePanel } from '@persona/design-system/lib/useResizablePanel';\nimport { Spacing } from '@persona/design-tokens';\n\nimport { ResizableVerticalPanel } from './ResizableVerticalPanel';\n\n// One-pixel panel top border plus the 32px header row sets the collapsed drawer height.\nconst PANEL_MIN_HEIGHT = 33;\n// Where the drawer opens to when a collapsed tab is selected; the user can drag from there.\nconst OPEN_HEIGHT = 200;\n\nexport interface BottomPanelItemProps {\n  /** Tab text; also the key `openPanel(label)` looks up. Unique per BottomPanel. */\n  label: string;\n  /**\n   * Tab body. Every panel stays mounted while another tab is selected, so local\n   * state (scroll, expanded rows) survives a switch.\n   */\n  content: ReactNode;\n  /** Count shown as a badge on the tab. `0`/`undefined` hides it. */\n  badge?: number;\n}\n\nexport interface BottomPanelHandle {\n  /** Select the tab and expand the drawer if collapsed. No-op for an unknown label. */\n  openPanel: (label: string) => void;\n}\n\nexport interface BottomPanelProps {\n  /** Tabs to show, in order. */\n  panels: BottomPanelItemProps[];\n}\n\nconst Header = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding-left: ${Spacing[4]};\n`;\n\n// The header row draws the divider edge to edge; the tab bar must not add its own.\nconst HeaderTabBar = styled(TabBar)`\n  border-bottom: none;\n`;\n\nconst PanelContent = styled.div<{ $hidden: boolean }>`\n  ${({ $hidden }) =>\n    $hidden\n      ? css`\n          position: absolute;\n          inset: 0;\n          overflow: hidden;\n          visibility: hidden;\n          pointer-events: none;\n        `\n      : css`\n          display: flex;\n          flex-direction: column;\n          flex: 1 1 auto;\n          min-height: 0;\n        `}\n`;\n\n/**\n * Resizable drawer anchored to the bottom of its container with one tab per\n * panel. Owns the tab bar, expand/collapse/resize, and always-mounted content;\n * the caller owns what each panel shows.\n */\nconst BottomPanel = forwardRef<BottomPanelHandle, BottomPanelProps>(function BottomPanel(\n  { panels },\n  ref,\n) {\n  const baseId = useId();\n  const [selected, setSelected] = useState<string | undefined>(panels[0]?.label);\n  // Falls back to the first panel when the selected label has left `panels`, and\n  // commits the fallback so the old label does not regain selection if it returns.\n  const hasSelected = panels.some((panel) => panel.label === selected);\n  const selectedLabel = hasSelected ? selected : panels[0]?.label;\n  useEffect(() => {\n    if (!hasSelected) {\n      setSelected(selectedLabel);\n    }\n  }, [hasSelected, selectedLabel]);\n\n  const resizablePanelState = useResizablePanel({\n    initialSize: PANEL_MIN_HEIGHT,\n    minSize: PANEL_MIN_HEIGHT,\n  });\n  const { expandTo, panelState, size } = resizablePanelState;\n\n  // Selecting a tab opens a collapsed drawer but leaves a maximized one as is.\n  const openPanel = useCallback(\n    (label: string) => {\n      if (panelState === PanelState.Drawer && (size == null || size <= PANEL_MIN_HEIGHT)) {\n        expandTo(OPEN_HEIGHT);\n      }\n      setSelected(label);\n    },\n    [expandTo, panelState, size],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      openPanel: (label: string) => {\n        if (panels.some((panel) => panel.label === label)) {\n          openPanel(label);\n        }\n      },\n    }),\n    [openPanel, panels],\n  );\n\n  return (\n    <ResizableVerticalPanel\n      headerContent={\n        <Header>\n          <HeaderTabBar>\n            {panels.map((panel, index) => (\n              <Tab\n                aria-controls={`${baseId}-panel-${index}`}\n                badge={panel.badge ? <Badge>{panel.badge}</Badge> : undefined}\n                id={`${baseId}-tab-${index}`}\n                key={panel.label}\n                onClick={() => openPanel(panel.label)}\n                selected={selectedLabel === panel.label}\n              >\n                {panel.label}\n              </Tab>\n            ))}\n          </HeaderTabBar>\n        </Header>\n      }\n      hookState={resizablePanelState}\n      minHeight={PANEL_MIN_HEIGHT}\n    >\n      {panels.map((panel, index) => {\n        const isSelected = selectedLabel === panel.label;\n        return (\n          <PanelContent\n            $hidden={!isSelected}\n            aria-hidden={!isSelected}\n            aria-labelledby={`${baseId}-tab-${index}`}\n            id={`${baseId}-panel-${index}`}\n            key={panel.label}\n            role='tabpanel'\n          >\n            {panel.content}\n          </PanelContent>\n        );\n      })}\n    </ResizableVerticalPanel>\n  );\n});\n\nexport default BottomPanel;\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-0e_3v9FF.mjs";
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-D_Gzd4_J.mjs";
 export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Breadcrumbs/index.mjs

@@ -1,2 +1,2 @@
-import { t as Breadcrumbs } from "../../Breadcrumbs-CqKtnZqu.mjs";
+import { t as Breadcrumbs } from "../../Breadcrumbs-Zi5p0HDR.mjs";
 export { Breadcrumbs, Breadcrumbs as default };

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

@@ -1,3 +1,3 @@
-import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-C0F0F2IL.mjs";
-import { t as IconButton } from "../../IconButton-CBcW7ZU8.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-BrI1s2-r.mjs";
+import { t as IconButton } from "../../IconButton-BpyOr8Ev.mjs";
 export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs

@@ -1,2 +1,2 @@
-import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-BfDlic2K.mjs";
+import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
 export { Button, Button as default, ButtonChildren, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.mjs

@@ -1,9 +1,9 @@
-import { t as IconButton } from "../../IconButton-BfDlic2K.mjs";
-import { n as useFormField } from "../../useFormField-eftOPiXj.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
+import { n as useFormField } from "../../useFormField-Bz2iMPBO.mjs";
 import { BorderRadius } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region components/ButtonGroup/ButtonGroup.tsx
 const OptionItem = styled(IconButton)`

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

@@ -1,3 +1,3 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-CBlB65NY.mjs";
-import { n as SectionProps, r as _default, t as CardProps } from "../../Card-BxNoIQWw.mjs";
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-BjSoTEX_.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-mZDNFaJy.mjs";
 export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.mjs

@@ -1,2 +1,2 @@
-import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-BMCB9eFC.mjs";
+import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-CKrJtn1f.mjs";
 export { ActionsContainer, Header, HeaderContainer, Root, Title, TitleContainer, Card_default as default };

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

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-CnNf5T-l.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "../../Action-CcAyQpYN.mjs";
 import { CARD_HEADING_STICKY_OFFSET } from "../../SectionHeading.mjs";
 import _default from "../../Card2.mjs";
 export { CARD_HEADING_STICKY_OFFSET, _default as Card, _default as default, type IconAction, type MenuAction, type TextAction };

package/dist/components/CardV2/index.mjs

@@ -1,2 +1,2 @@
-import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-B0ZweQYk.mjs";
+import { n as CARD_HEADING_STICKY_OFFSET, t as Card_default } from "../../CardV2-CXxzl1EZ.mjs";
 export { CARD_HEADING_STICKY_OFFSET, Card_default as Card, Card_default as default };

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

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

package/dist/components/Checkbox/index.mjs

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "../../Checkbox-DAvbgZgO.mjs";
+import { t as Checkbox } from "../../Checkbox-DxNHp59y.mjs";
 export { Checkbox, Checkbox as default };

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

@@ -1,3 +1,3 @@
-import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-DJGTMf1_.mjs";
-import { n as ComboboxProps, t as Combobox } from "../../Combobox-C8ue0cBP.mjs";
+import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-BkSpdmsT.mjs";
+import { n as ComboboxProps, t as Combobox } from "../../Combobox-C9QBItsc.mjs";
 export { CaretButton, Combobox, Combobox as default, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, ComboboxProps, flattenOptions };

package/dist/components/Combobox/index.mjs

@@ -1,2 +1,2 @@
-import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-xBrxiUAu.mjs";
+import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-BUtqtzKl.mjs";
 export { CaretButton, Combobox, Combobox as default, flattenOptions };

package/dist/components/ConfigFormGroup/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-BMukAMAd.mjs";
-import { t as ConfigFormGroup } from "../../ConfigFormGroup-D2_sajXe.mjs";
+import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-CaTiD_Yt.mjs";
+import { t as ConfigFormGroup } from "../../ConfigFormGroup-aSdn2r6Z.mjs";
 export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };