@persona/design-system 0.4.0 → 0.5.0

package/dist/{DropdownMenu-CUnf420M.mjs → DropdownMenu-CyxizDxJ.mjs}

@@ -1,7 +1,7 @@
 import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
 import "./variables/spacing.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { a as MenuDivider, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-38UCGcte.mjs";
+import { a as MenuDivider, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DVI8l-4Q.mjs";
 import { Children, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "@radix-ui/react-dropdown-menu";
@@ -57,4 +57,4 @@ var DropdownMenu_default = Object.assign(DropdownMenu, {
 //#endregion
 export { DropdownMenu_default as n, DropdownMenu as t };
 
-//# sourceMappingURL=DropdownMenu-CUnf420M.mjs.map
+//# sourceMappingURL=DropdownMenu-CyxizDxJ.mjs.map

package/dist/{DropdownMenu-CUnf420M.mjs.map → DropdownMenu-CyxizDxJ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu-CUnf420M.mjs","names":[],"sources":["../components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { Property } from 'csstype';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type FunctionComponentElement,\n  type Ref,\n} from 'react';\nimport styled from 'styled-components';\n\nimport Menu, {\n  MenuDivider,\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n} from 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.tooltip};\n`;\n\nexport interface DropdownMenuProps\n  extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {\n  id?: string;\n  className?: string;\n\n  trigger: FunctionComponentElement<any>;\n\n  /**\n   * Props passed to internal DropdownMenu.Content component.\n   */\n  contentProps?: Primitive.DropdownMenuContentProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Trigger component.\n   */\n  triggerProps?: Primitive.DropdownMenuTriggerProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Portal component.\n   */\n  portalProps?: Primitive.DropdownMenuPortalProps;\n\n  /**\n   * Whether or not to wrap menu with DropdownMenu.Portal component.\n   */\n  portal?: boolean;\n\n  /**\n   * Whether or not clicks render menu items.\n   */\n  disabled?: boolean;\n\n  zIndex?: Property.ZIndex;\n}\n\nexport const DropdownMenu = ({\n  trigger,\n  children,\n  side,\n  align = 'end',\n  contentProps,\n  triggerProps,\n  portalProps,\n  className,\n  portal = false, // Default to false for old behavior\n  modal = false,\n  disabled = false,\n  zIndex,\n  ...props\n}: DropdownMenuProps) => {\n  if (Children.count(children) === 0) {\n    return null;\n  }\n\n  const content = disabled ? null : (\n    <DropdownMenuContent\n      sideOffset={BASE}\n      collisionPadding={BASE}\n      align={align}\n      side={side}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <Menu className={className} doNotSetRole>\n        {children}\n      </Menu>\n    </DropdownMenuContent>\n  );\n\n  return (\n    <Primitive.Root modal={modal} {...props}>\n      <Primitive.Trigger asChild {...triggerProps}>\n        {trigger}\n      </Primitive.Trigger>\n\n      {portal ? <Primitive.Portal {...portalProps}>{content}</Primitive.Portal> : content}\n    </Primitive.Root>\n  );\n};\n\ninterface DropdownMenuItemProps<T extends ElementType = 'div'>\n  extends MenuItemProps<T>, Omit<Primitive.DropdownMenuItemProps, 'asChild' | 'children'> {}\n\ninterface DropdownMenuItemType<T extends ElementType = 'div'> extends FC<\n  DropdownMenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst DropdownMenuItem: DropdownMenuItemType = forwardRef(function DropdownMenuItem(\n  { children, disabled, ...props },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <Primitive.Item asChild disabled={disabled} {...props}>\n      <MenuItem disabled={disabled} ref={ref}>\n        {children}\n      </MenuItem>\n    </Primitive.Item>\n  );\n});\n\nexport default Object.assign(DropdownMenu, {\n  Item: DropdownMenuItem,\n  Heading: MenuHeading,\n  Divider: MenuDivider,\n});\n"],"mappings":";;;;;;;;AAuBA,MAAM,sBAAsB,OAAO,UAAU,QAAQ;cACvC,EAAE,cAAc,WAAW,UAAU,QAAQ;;AAsC3D,MAAa,gBAAgB,EAC3B,SACA,UACA,MACA,QAAQ,OACR,cACA,cACA,aACA,WACA,SAAS,OACT,QAAQ,OACR,WAAW,OACX,QACA,GAAG,YACoB;AACvB,KAAI,SAAS,MAAM,SAAS,KAAK,EAC/B,QAAO;CAGT,MAAM,UAAU,WAAW,OACzB,oBAAC,qBAAD;EACE,YAAA;EACA,kBAAA;EACO;EACD;EACN,SAAS;EACT,GAAI;YAEJ,oBAAC,MAAD;GAAiB;GAAW,cAAA;GACzB;GACI,CAAA;EACa,CAAA;AAGxB,QACE,qBAAC,UAAU,MAAX;EAAuB;EAAO,GAAI;YAAlC,CACE,oBAAC,UAAU,SAAX;GAAmB,SAAA;GAAQ,GAAI;aAC5B;GACiB,CAAA,EAEnB,SAAS,oBAAC,UAAU,QAAX;GAAkB,GAAI;aAAc;GAA2B,CAAA,GAAG,QAC7D;;;AAgBrB,MAAM,mBAAyC,WAAW,SAAS,iBACjE,EAAE,UAAU,UAAU,GAAG,SACzB,KACA;AACA,QACE,oBAAC,UAAU,MAAX;EAAgB,SAAA;EAAkB;EAAU,GAAI;YAC9C,oBAAC,UAAD;GAAoB;GAAe;GAChC;GACQ,CAAA;EACI,CAAA;EAEnB;AAEF,IAAA,uBAAe,OAAO,OAAO,cAAc;CACzC,MAAM;CACN,SAAS;CACT,SAAS;CACV,CAAC"}
+{"version":3,"file":"DropdownMenu-CyxizDxJ.mjs","names":[],"sources":["../components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { Property } from 'csstype';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type FunctionComponentElement,\n  type Ref,\n} from 'react';\nimport styled from 'styled-components';\n\nimport Menu, {\n  MenuDivider,\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n} from 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.tooltip};\n`;\n\nexport interface DropdownMenuProps\n  extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {\n  id?: string;\n  className?: string;\n\n  trigger: FunctionComponentElement<any>;\n\n  /**\n   * Props passed to internal DropdownMenu.Content component.\n   */\n  contentProps?: Primitive.DropdownMenuContentProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Trigger component.\n   */\n  triggerProps?: Primitive.DropdownMenuTriggerProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Portal component.\n   */\n  portalProps?: Primitive.DropdownMenuPortalProps;\n\n  /**\n   * Whether or not to wrap menu with DropdownMenu.Portal component.\n   */\n  portal?: boolean;\n\n  /**\n   * Whether or not clicks render menu items.\n   */\n  disabled?: boolean;\n\n  zIndex?: Property.ZIndex;\n}\n\nexport const DropdownMenu = ({\n  trigger,\n  children,\n  side,\n  align = 'end',\n  contentProps,\n  triggerProps,\n  portalProps,\n  className,\n  portal = false, // Default to false for old behavior\n  modal = false,\n  disabled = false,\n  zIndex,\n  ...props\n}: DropdownMenuProps) => {\n  if (Children.count(children) === 0) {\n    return null;\n  }\n\n  const content = disabled ? null : (\n    <DropdownMenuContent\n      sideOffset={BASE}\n      collisionPadding={BASE}\n      align={align}\n      side={side}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <Menu className={className} doNotSetRole>\n        {children}\n      </Menu>\n    </DropdownMenuContent>\n  );\n\n  return (\n    <Primitive.Root modal={modal} {...props}>\n      <Primitive.Trigger asChild {...triggerProps}>\n        {trigger}\n      </Primitive.Trigger>\n\n      {portal ? <Primitive.Portal {...portalProps}>{content}</Primitive.Portal> : content}\n    </Primitive.Root>\n  );\n};\n\ninterface DropdownMenuItemProps<T extends ElementType = 'div'>\n  extends MenuItemProps<T>, Omit<Primitive.DropdownMenuItemProps, 'asChild' | 'children'> {}\n\ninterface DropdownMenuItemType<T extends ElementType = 'div'> extends FC<\n  DropdownMenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst DropdownMenuItem: DropdownMenuItemType = forwardRef(function DropdownMenuItem(\n  { children, disabled, ...props },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <Primitive.Item asChild disabled={disabled} {...props}>\n      <MenuItem disabled={disabled} ref={ref}>\n        {children}\n      </MenuItem>\n    </Primitive.Item>\n  );\n});\n\nexport default Object.assign(DropdownMenu, {\n  Item: DropdownMenuItem,\n  Heading: MenuHeading,\n  Divider: MenuDivider,\n});\n"],"mappings":";;;;;;;;AAuBA,MAAM,sBAAsB,OAAO,UAAU,QAAQ;cACvC,EAAE,cAAc,WAAW,UAAU,QAAQ;;AAsC3D,MAAa,gBAAgB,EAC3B,SACA,UACA,MACA,QAAQ,OACR,cACA,cACA,aACA,WACA,SAAS,OACT,QAAQ,OACR,WAAW,OACX,QACA,GAAG,YACoB;AACvB,KAAI,SAAS,MAAM,SAAS,KAAK,EAC/B,QAAO;CAGT,MAAM,UAAU,WAAW,OACzB,oBAAC,qBAAD;EACE,YAAA;EACA,kBAAA;EACO;EACD;EACN,SAAS;EACT,GAAI;YAEJ,oBAAC,MAAD;GAAiB;GAAW,cAAA;GACzB;GACI,CAAA;EACa,CAAA;AAGxB,QACE,qBAAC,UAAU,MAAX;EAAuB;EAAO,GAAI;YAAlC,CACE,oBAAC,UAAU,SAAX;GAAmB,SAAA;GAAQ,GAAI;aAC5B;GACiB,CAAA,EAEnB,SAAS,oBAAC,UAAU,QAAX;GAAkB,GAAI;aAAc;GAA2B,CAAA,GAAG,QAC7D;;;AAgBrB,MAAM,mBAAyC,WAAW,SAAS,iBACjE,EAAE,UAAU,UAAU,GAAG,SACzB,KACA;AACA,QACE,oBAAC,UAAU,MAAX;EAAgB,SAAA;EAAkB;EAAU,GAAI;YAC9C,oBAAC,UAAD;GAAoB;GAAe;GAChC;GACQ,CAAA;EACI,CAAA;EAEnB;AAEF,IAAA,uBAAe,OAAO,OAAO,cAAc;CACzC,MAAM;CACN,SAAS;CACT,SAAS;CACV,CAAC"}

package/dist/{DropdownMenu-BoatixlO.d.mts → DropdownMenu-RTxQ0Zu1.d.mts}

@@ -1,6 +1,6 @@
-import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-ZShdhNd7.mjs";
-import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
+import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-BCVhmNEe.mjs";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "@radix-ui/react-dropdown-menu";
 import { Property } from "csstype";
@@ -72,4 +72,4 @@ declare const _default: (({
 };
 //#endregion
 export { DropdownMenuProps as n, _default as r, DropdownMenu as t };
-//# sourceMappingURL=DropdownMenu-BoatixlO.d.mts.map
+//# sourceMappingURL=DropdownMenu-RTxQ0Zu1.d.mts.map

package/dist/DropdownMenu.d.mts

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

package/dist/FloatValueControl.d.mts

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-B5VmRRMR.mjs";
+import { t as ValueControlProps } from "./types-DBBfOCX1.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/FloatValueControl/FloatValueControl.d.ts

package/dist/{FormControl-0H0Jeind.d.mts → FormControl-BMYRsFkI.d.mts}

@@ -1,7 +1,7 @@
 import { t as ErrorProps } from "./ErrorProps-C9T857Wk.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-label";
 
@@ -57,4 +57,4 @@ interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlB
 declare const FormControl: _$react.ForwardRefExoticComponent<FormControlProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormControlProps as a, FormLabelProps as c, FormControlBaseProps as i, HelperText as l, ErrorText as n, FormInputContainer as o, FormControl as r, FormLabel as s, Container as t, WarningText as u };
-//# sourceMappingURL=FormControl-0H0Jeind.d.mts.map
+//# sourceMappingURL=FormControl-BMYRsFkI.d.mts.map

package/dist/{FormControl-1BmoYFCu.mjs → FormControl-DQFefbrI.mjs}

@@ -1,7 +1,7 @@
 import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-iJcfJqxn.mjs";
-import { n as useFormGroup } from "./useFormGroup-CaTiD_Yt.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-Bz2iMPBO.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-DSKGD33G.mjs";
+import { n as useFormGroup } from "./useFormGroup-y-duFylq.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-C-K1lgmv.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { Children, forwardRef, isValidElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -165,4 +165,4 @@ const FormControl = forwardRef(function FormControl({ children, hasError, hasWar
 //#endregion
 export { FormLabel as a, FormInputContainer as i, ErrorText as n, HelperText as o, FormControl as r, WarningText as s, Container as t };
 
-//# sourceMappingURL=FormControl-1BmoYFCu.mjs.map
+//# sourceMappingURL=FormControl-DQFefbrI.mjs.map

package/dist/{FormControl-1BmoYFCu.mjs.map → FormControl-DQFefbrI.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FormControl-1BmoYFCu.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport { uniqueId } from 'lodash-es';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n  FormControlContext,\n  type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' | 'sm';\n\ninterface StyledLabelProps {\n  $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n  tooltip?: ReactNode;\n  size?: LabelSizes;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n  tooltip,\n  side,\n  size,\n  children,\n  labelTooltipZIndex,\n  ...props\n}: FormLabelProps) => {\n  const field = useFormField({ labelId: props.id });\n  const formGroup = useFormGroup();\n  const labelProps = {\n    id: field.labelId,\n    htmlFor: field.inputId,\n    ...props,\n  };\n\n  // Use labelTooltipZIndex from props, then from form group context\n  const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n  if (tooltip) {\n    return (\n      <Tooltip\n        size={size}\n        trigger={\n          <LabelBase {...labelProps} $size={size}>\n            <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n          </LabelBase>\n        }\n        side={side}\n        {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n      >\n        {tooltip}\n      </Tooltip>\n    );\n  }\n\n  return (\n    <LabelBase {...labelProps} $size={size}>\n      {children}\n    </LabelBase>\n  );\n};\n\n/**\n * Used to target an input field within a FormControl.\n */\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n  ${Typography.TextSmall};\n  line-height: 1;\n  color: ${({ theme, hasWarning, hasError }) =>\n    hasError\n      ? theme.color.variants.danger.default\n      : hasWarning\n        ? Color.CoreOrange900\n        : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n  function HelperText(props, ref) {\n    const field = useFormField({ helperTextId: props.id });\n    return (\n      <HelperTextBase\n        hasError={field.hasError}\n        hasWarning={field.hasWarning}\n        id={field.helperTextId}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function ErrorText(props, ref) {\n    const field = useFormField({ errorTextId: props.id });\n    return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function WarningText(props, ref) {\n    const field = useFormField({ warningTextId: props.id });\n    return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const Container = styled.div<{\n  $configField?: boolean;\n  $hasRightActions?: boolean;\n  $configFieldInputWidth?: string;\n}>`\n  display: flex;\n  ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n    $configField\n      ? $hasRightActions\n        ? css`\n            flex-direction: column;\n          `\n        : css`\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n            gap: ${Spacing[4]};\n            min-width: 288px;\n\n            > ${FormInputContainer} {\n              display: flex;\n              flex-direction: row-reverse;\n              width: ${$configFieldInputWidth ?? '50%'};\n              min-width: 180px;\n            }\n\n            &:has(textarea) {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: ${Spacing[1]};\n\n              > ${FormInputContainer} {\n                width: 100%;\n              }\n            }\n          `\n      : css`\n          flex-direction: column;\n          margin-bottom: ${Spacing[3]};\n        `}\n\n  > *:not(:first-child) {\n    margin-top: ${({ $configField, $hasRightActions }) =>\n      $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n  }\n\n  > ${HelperTextBase} {\n    margin-top: ${Spacing[1]};\n  }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n  inputId?: string;\n  disabled?: boolean;\n  /**\n   * Whether to render the form field as a config field.\n   * This will remove the label and helper text.\n   */\n  configField?: boolean;\n  /**\n   * Whether the form field has right actions.\n   */\n  hasRightActions?: boolean;\n  /**\n   * Override the width of the form input container when `configField` is true.\n   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n   * Defaults to `'50%'`.\n   */\n  configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n  {\n    children,\n    hasError,\n    hasWarning,\n    inputId,\n    disabled,\n    configField,\n    hasRightActions,\n    configFieldInputWidth,\n    ...props\n  }: FormControlProps,\n  ref,\n) {\n  const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n  const initFormField: FormControlContextProps = {\n    hasError,\n    hasWarning,\n    disabled,\n    inputId: inputId ?? generatedId,\n    configField,\n  };\n\n  Children.map(children, (child: ReactNode) => {\n    if (isValidElement(child)) {\n      switch (child.type) {\n        case FormLabel: {\n          initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n          break;\n        }\n        case HelperText: {\n          initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n          break;\n        }\n        case ErrorText: {\n          initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n          break;\n        }\n        case WarningText: {\n          initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n          break;\n        }\n      }\n    }\n  });\n\n  const field = useFormField(initFormField);\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container\n        ref={ref}\n        $configField={field.configField}\n        $hasRightActions={hasRightActions}\n        $configFieldInputWidth={configFieldInputWidth}\n        {...props}\n      >\n        {children}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,YAAY,OAAO,KAAK;KACzB,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;YACN,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;YACN,WAAW,UAAU;;;EAG7B;;YAEQ,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;AAUnD,MAAa,aAAa,EACxB,SACA,MACA,MACA,UACA,oBACA,GAAG,YACiB;CACpB,MAAM,QAAQ,aAAa,EAAE,SAAS,MAAM,IAAI,CAAC;CACjD,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa;EACjB,IAAI,MAAM;EACV,SAAS,MAAM;EACf,GAAG;EACJ;CAGD,MAAM,8BAA8B,sBAAsB,UAAU;AAEpE,KAAI,QACF,QACE,oBAAC,SAAD;EACQ;EACN,SACE,oBAAC,WAAD;GAAW,GAAI;GAAY,OAAO;aAChC,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;GACnD,CAAA;EAER;EACN,GAAK,+BAA+B,QAAQ,EAAE,QAAQ,6BAA6B;YAElF;EACO,CAAA;AAId,QACE,oBAAC,WAAD;EAAW,GAAI;EAAY,OAAO;EAC/B;EACS,CAAA;;;;;AAOhB,MAAa,qBAAqB,OAAO,GAAG;AAE5C,MAAM,iBAAiB,OAAO,GAAe;IACzC,WAAW,UAAU;;YAEb,EAAE,OAAO,YAAY,eAC7B,WACI,MAAM,MAAM,SAAS,OAAO,UAC5B,aACE,MAAM,gBACN,MAAM,MAAM,KAAK,UAAU;;AAKrC,MAAa,aAAa,WACxB,SAAS,WAAW,OAAO,KAAK;CAC9B,MAAM,QAAQ,aAAa,EAAE,cAAc,MAAM,IAAI,CAAC;AACtD,QACE,oBAAC,gBAAD;EACE,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,IAAI,MAAM;EACL;EACL,GAAI;EACJ,CAAA;EAGP;AAED,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;AAE7B,QAAO,oBAAC,gBAAD;EAAgB,UAAA;EAAS,IADlB,aAAa,EAAE,aAAa,MAAM,IAAI,CACX,CAAC;EAAkB;EAAK,GAAI;EAAS,CAAA;EAEjF;AAED,MAAa,cAAc,WACzB,SAAS,YAAY,OAAO,KAAK;AAE/B,QAAO,oBAAC,gBAAD;EAAgB,YAAA;EAAW,IADpB,aAAa,EAAE,eAAe,MAAM,IAAI,CACX,CAAC;EAAoB;EAAK,GAAI;EAAS,CAAA;EAErF;AAED,MAAa,YAAY,OAAO,GAI9B;;KAEG,EAAE,cAAc,kBAAkB,6BACnC,eACI,mBACE,GAAG;;cAGH,GAAG;;;;mBAIM,QAAQ,GAAG;;;gBAGd,mBAAmB;;;uBAGZ,0BAA0B,MAAM;;;;;;;qBAOlC,QAAQ,GAAG;;kBAEd,mBAAmB;;;;cAK7B,GAAG;;2BAEgB,QAAQ,GAAG;UAC5B;;;mBAGS,EAAE,cAAc,uBAC7B,mBAAmB,QAAQ,KAAK,eAAe,QAAQ,KAAK,QAAQ,GAAG;;;MAGvE,eAAe;kBACH,QAAQ,GAAG;;;AA0B7B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EACE,UACA,UACA,YACA,SACA,UACA,aACA,iBACA,uBACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,cAAc,SAAS,qBAAqB,EAAE,EAAE,CAAC;CAErE,MAAM,gBAAyC;EAC7C;EACA;EACA;EACA,SAAS,WAAW;EACpB;EACD;AAED,UAAS,IAAI,WAAW,UAAqB;AAC3C,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK;AACH,kBAAc,UAAU,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACnE;GAEF,KAAK;AACH,kBAAc,eAAe,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACxE;GAEF,KAAK;AACH,kBAAc,cAAc,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACvE;GAEF,KAAK;AACH,kBAAc,gBAAgB,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACzE;;GAIN;CAEF,MAAM,QAAQ,aAAa,cAAc;AAEzC,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,WAAD;GACO;GACL,cAAc,MAAM;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,GAAI;GAEH;GACS,CAAA;EACgB,CAAA;EAEhC"}
+{"version":3,"file":"FormControl-DQFefbrI.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport { uniqueId } from 'lodash-es';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n  FormControlContext,\n  type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' | 'sm';\n\ninterface StyledLabelProps {\n  $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n  tooltip?: ReactNode;\n  size?: LabelSizes;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n  tooltip,\n  side,\n  size,\n  children,\n  labelTooltipZIndex,\n  ...props\n}: FormLabelProps) => {\n  const field = useFormField({ labelId: props.id });\n  const formGroup = useFormGroup();\n  const labelProps = {\n    id: field.labelId,\n    htmlFor: field.inputId,\n    ...props,\n  };\n\n  // Use labelTooltipZIndex from props, then from form group context\n  const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n  if (tooltip) {\n    return (\n      <Tooltip\n        size={size}\n        trigger={\n          <LabelBase {...labelProps} $size={size}>\n            <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n          </LabelBase>\n        }\n        side={side}\n        {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n      >\n        {tooltip}\n      </Tooltip>\n    );\n  }\n\n  return (\n    <LabelBase {...labelProps} $size={size}>\n      {children}\n    </LabelBase>\n  );\n};\n\n/**\n * Used to target an input field within a FormControl.\n */\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n  ${Typography.TextSmall};\n  line-height: 1;\n  color: ${({ theme, hasWarning, hasError }) =>\n    hasError\n      ? theme.color.variants.danger.default\n      : hasWarning\n        ? Color.CoreOrange900\n        : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n  function HelperText(props, ref) {\n    const field = useFormField({ helperTextId: props.id });\n    return (\n      <HelperTextBase\n        hasError={field.hasError}\n        hasWarning={field.hasWarning}\n        id={field.helperTextId}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function ErrorText(props, ref) {\n    const field = useFormField({ errorTextId: props.id });\n    return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function WarningText(props, ref) {\n    const field = useFormField({ warningTextId: props.id });\n    return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const Container = styled.div<{\n  $configField?: boolean;\n  $hasRightActions?: boolean;\n  $configFieldInputWidth?: string;\n}>`\n  display: flex;\n  ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n    $configField\n      ? $hasRightActions\n        ? css`\n            flex-direction: column;\n          `\n        : css`\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n            gap: ${Spacing[4]};\n            min-width: 288px;\n\n            > ${FormInputContainer} {\n              display: flex;\n              flex-direction: row-reverse;\n              width: ${$configFieldInputWidth ?? '50%'};\n              min-width: 180px;\n            }\n\n            &:has(textarea) {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: ${Spacing[1]};\n\n              > ${FormInputContainer} {\n                width: 100%;\n              }\n            }\n          `\n      : css`\n          flex-direction: column;\n          margin-bottom: ${Spacing[3]};\n        `}\n\n  > *:not(:first-child) {\n    margin-top: ${({ $configField, $hasRightActions }) =>\n      $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n  }\n\n  > ${HelperTextBase} {\n    margin-top: ${Spacing[1]};\n  }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n  inputId?: string;\n  disabled?: boolean;\n  /**\n   * Whether to render the form field as a config field.\n   * This will remove the label and helper text.\n   */\n  configField?: boolean;\n  /**\n   * Whether the form field has right actions.\n   */\n  hasRightActions?: boolean;\n  /**\n   * Override the width of the form input container when `configField` is true.\n   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n   * Defaults to `'50%'`.\n   */\n  configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n  {\n    children,\n    hasError,\n    hasWarning,\n    inputId,\n    disabled,\n    configField,\n    hasRightActions,\n    configFieldInputWidth,\n    ...props\n  }: FormControlProps,\n  ref,\n) {\n  const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n  const initFormField: FormControlContextProps = {\n    hasError,\n    hasWarning,\n    disabled,\n    inputId: inputId ?? generatedId,\n    configField,\n  };\n\n  Children.map(children, (child: ReactNode) => {\n    if (isValidElement(child)) {\n      switch (child.type) {\n        case FormLabel: {\n          initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n          break;\n        }\n        case HelperText: {\n          initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n          break;\n        }\n        case ErrorText: {\n          initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n          break;\n        }\n        case WarningText: {\n          initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n          break;\n        }\n      }\n    }\n  });\n\n  const field = useFormField(initFormField);\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container\n        ref={ref}\n        $configField={field.configField}\n        $hasRightActions={hasRightActions}\n        $configFieldInputWidth={configFieldInputWidth}\n        {...props}\n      >\n        {children}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default FormControl;\n"],"mappings":"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"}

package/dist/FormControl.d.mts

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

package/dist/FormControlLabel.d.mts

@@ -1,6 +1,6 @@
-import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-CAKHcXSd.mjs";
-import * as _$react from "react";
+import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-BzzUdBdc.mjs";
 import * as _$styled_components0 from "styled-components";
+import * as _$react from "react";
 
 //#region components/DataTable/FormControlLabel/FormControlLabel.d.ts
 declare const FormControlLabel: _$styled_components0.StyledComponent<_$react.FC<_$react.PropsWithChildren<SpanProps>>, any, ParagraphProps & LabelProps & {

package/dist/{FormField-BcaFdmo5.d.mts → FormField-C1DaUT5U.d.mts}

@@ -1,4 +1,4 @@
-import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-0H0Jeind.mjs";
+import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-BMYRsFkI.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 
@@ -50,12 +50,11 @@ interface FormFieldBaseProps {
 }
 interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}
 /**
- * > **Please do not use in production! This component is subject to API and style changes.**
+ * Helper component with preset slots for label, input, and helper texts.
  *
- * Helper components with preset slots for label, input, and helper texts.
- * Fully composed components with different form input types are available.
- * This is the recommended way to implement form elements.
- * You can use `<FormControl>` if you require more flexibility.
+ * Prefer a composed field component, such as `<TextField>`, `<SelectField>`, or
+ * `<CheckboxField>`, when one is available for the input type. Use `<FormField>` directly
+ * when composing a custom control or layout.
  *
  * ## Usage
  *
@@ -66,4 +65,4 @@ interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBa
 declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
-//# sourceMappingURL=FormField-BcaFdmo5.d.mts.map
+//# sourceMappingURL=FormField-C1DaUT5U.d.mts.map

package/dist/{FormField-oBKH25qf.mjs → FormField-C7bW-O6H.mjs}

@@ -1,19 +1,19 @@
 import { t as HStack } from "./Stack-Bre2oiov.mjs";
-import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
-import { n as useFormGroup } from "./useFormGroup-CaTiD_Yt.mjs";
-import { t as FormControlContext } from "./useFormField-Bz2iMPBO.mjs";
+import { t as IconButton } from "./IconButton-BnSEV7eR.mjs";
+import { n as useFormGroup } from "./useFormGroup-y-duFylq.mjs";
+import { t as FormControlContext } from "./useFormField-C-K1lgmv.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CUnf420M.mjs";
-import { t as Checkbox } from "./Checkbox-DxNHp59y.mjs";
-import { t as Combobox } from "./Combobox-BUtqtzKl.mjs";
-import { n as Select } from "./Select-U_vQhK1A.mjs";
-import { t as Toggle } from "./Toggle-e8DCYa6i.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "./FormControl-1BmoYFCu.mjs";
-import { t as ListBox } from "./ListBox-9jHHEaqW.mjs";
-import { t as RadioGroup } from "./RadioGroup-BGo_kXKh.mjs";
-import { t as SegmentedControl } from "./SegmentedControl-CvWJGhwy.mjs";
-import { t as TextAreaWithStyle } from "./TextArea-n4IKHJKo.mjs";
-import { t as TableBox } from "./TableBox-0GvWjRln.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CyxizDxJ.mjs";
+import { t as Checkbox } from "./Checkbox-DwZEsi7x.mjs";
+import { t as Combobox } from "./Combobox-CKaVX-32.mjs";
+import { n as Select } from "./Select-CBVvPyRJ.mjs";
+import { t as Toggle } from "./Toggle-Do5z1VcO.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "./FormControl-DQFefbrI.mjs";
+import { t as ListBox } from "./ListBox-jzXQDraS.mjs";
+import { t as RadioGroup } from "./RadioGroup-pegXtLwD.mjs";
+import { t as SegmentedControl } from "./SegmentedControl-DwbltwDQ.mjs";
+import { t as TextAreaWithStyle } from "./TextArea-CospIXEO.mjs";
+import { t as TableBox } from "./TableBox-Bd-H5oyh.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { Children, Fragment, cloneElement, createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -24,12 +24,11 @@ import { useCheckboxGroupState } from "react-stately";
 import innerText from "react-innertext";
 //#region components/FormField/FormField.tsx
 /**
-* > **Please do not use in production! This component is subject to API and style changes.**
+* Helper component with preset slots for label, input, and helper texts.
 *
-* Helper components with preset slots for label, input, and helper texts.
-* Fully composed components with different form input types are available.
-* This is the recommended way to implement form elements.
-* You can use `<FormControl>` if you require more flexibility.
+* Prefer a composed field component, such as `<TextField>`, `<SelectField>`, or
+* `<CheckboxField>`, when one is available for the input type. Use `<FormField>` directly
+* when composing a custom control or layout.
 *
 * ## Usage
 *
@@ -474,4 +473,4 @@ TableBoxField.Cell = TableBox.Cell;
 //#endregion
 export { CheckboxField as a, SegmentedControlField as c, TextField as d, ToggleField as f, CheckboxGroupField as i, SelectField as l, FormField as m, TableBoxField as n, ComboboxField as o, splitOutFormFieldProps as p, ListBoxField as r, RadioGroupField as s, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL as t, TextAreaField as u };
 
-//# sourceMappingURL=FormField-oBKH25qf.mjs.map
+//# sourceMappingURL=FormField-C7bW-O6H.mjs.map

package/dist/FormField-C7bW-O6H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-C7bW-O6H.mjs","names":["Input","TextArea","DropdownMenu","DropdownMenu"],"sources":["../components/FormField/FormField.tsx","../components/FormField/inputFields.tsx","../components/FormField/CheckboxGroupField.tsx","../components/FormField/ListBoxField.tsx","../components/FormField/TableBoxField.tsx"],"sourcesContent":["import { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport FormControl, {\n  ErrorText,\n  type FormControlProps,\n  FormInputContainer,\n  FormLabel,\n  HelperText,\n  WarningText,\n} from 'design-system/components/FormControl';\nimport { HStack } from 'design-system/components/Stack';\n\nexport interface FormFieldBaseProps {\n  /**\n   * Renders `<Label>` above input\n   */\n  label?: ReactNode;\n\n  /**\n   * ID of the input element. Providing this will automatically link the label to the input.\n   */\n  inputId?: string;\n\n  /**\n   * Renders `<HelperText>` below input\n   */\n  helperText?: ReactNode;\n\n  /**\n   * Renders `<ErrorText>` below input and helper text.\n   */\n  errorText?: ReactNode;\n\n  /**\n   * Renders `<WarningText>` below input and helper text.\n   */\n  warningText?: ReactNode;\n\n  /**\n   * Should be an input of some sort\n   */\n  children?: ReactElement;\n\n  labelProps?: ComponentPropsWithRef<typeof FormLabel>;\n  helperProps?: ComponentPropsWithRef<typeof HelperText>;\n  warningProps?: ComponentPropsWithRef<typeof WarningText>;\n  errorProps?: ComponentPropsWithRef<typeof ErrorText>;\n\n  /**\n   * Whether to render the form field as a config field.\n   * This will render the helper text as a tooltip.\n   */\n  configField?: boolean;\n\n  /**\n   * Override the width of the input area when `configField` is true.\n   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n   * Defaults to `'50%'`.\n   */\n  configFieldInputWidth?: string;\n\n  /**\n   * Renders actions to the right of the label.\n   */\n  rightActions?: ReactNode;\n}\n\nexport interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}\n\n/**\n * Helper component with preset slots for label, input, and helper texts.\n *\n * Prefer a composed field component, such as `<TextField>`, `<SelectField>`, or\n * `<CheckboxField>`, when one is available for the input type. Use `<FormField>` directly\n * when composing a custom control or layout.\n *\n * ## Usage\n *\n * ```tsx\n * import FormField from 'design-system/components/FormField';\n * ```\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    label,\n    children,\n    helperText,\n    warningText,\n    errorText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField: configFieldProp,\n    configFieldInputWidth,\n    rightActions,\n    ...props\n  }: FormFieldProps,\n  ref,\n) {\n  const { configField: configFieldFormGroup } = useFormGroup();\n  const configField = configFieldProp ?? configFieldFormGroup;\n\n  const labelElement = label ? (\n    <FormLabel tooltip={configField && helperText ? helperText : undefined} {...labelProps}>\n      {label}\n    </FormLabel>\n  ) : null;\n\n  return (\n    <FormControl\n      hasError={!!errorText}\n      hasWarning={!!warningText}\n      ref={ref}\n      configField={configField}\n      hasRightActions={!!rightActions}\n      configFieldInputWidth={configFieldInputWidth}\n      {...props}\n    >\n      {rightActions ? (\n        <HStack justify='space-between' align='center'>\n          {labelElement}\n          <HStack spacing={Spacing[1]}>{rightActions}</HStack>\n        </HStack>\n      ) : (\n        labelElement\n      )}\n      <FormInputContainer>{children}</FormInputContainer>\n      {!configField && helperText && <HelperText {...helperProps}>{helperText}</HelperText>}\n      {!configField && warningText && <WarningText {...warningProps}>{warningText}</WarningText>}\n      {!configField && errorText && <ErrorText {...errorProps}>{errorText}</ErrorText>}\n    </FormControl>\n  );\n});\n\nexport default FormField;\n","import { uniqueId } from 'lodash-es';\nimport { forwardRef, useMemo } from 'react';\n\nimport Checkbox, { type CheckboxProps } from 'design-system/components/Checkbox';\nimport Combobox from 'design-system/components/Combobox';\nimport type { ComboboxMultiSelectProps } from 'design-system/components/Combobox/ComboboxMultiSelect';\nimport type { ComboboxSingleSelectProps } from 'design-system/components/Combobox/ComboboxSingleSelect';\nimport FormField, { type FormFieldBaseProps } from 'design-system/components/FormField/FormField';\nimport Input, { type InputProps } from 'design-system/components/Input';\nimport RadioGroup, { type RadioGroupProps } from 'design-system/components/RadioGroup';\nimport SegmentedControl, {\n  type SegmentedControlProps,\n} from 'design-system/components/SegmentedControl';\nimport Select, { type SelectProps } from 'design-system/components/Select';\nimport TextArea, { type TextAreaProps } from 'design-system/components/TextArea';\nimport Toggle, { type ToggleProps } from 'design-system/components/Toggle';\n\nexport type ImplementsFormField = Omit<FormFieldBaseProps, 'children'>;\n\ntype ExtractFormFieldProps<T extends ImplementsFormField> = Pick<\n  T,\n  | 'label'\n  | 'inputId'\n  | 'helperText'\n  | 'errorText'\n  | 'warningText'\n  | 'labelProps'\n  | 'helperProps'\n  | 'warningProps'\n  | 'errorProps'\n  | 'configField'\n  | 'configFieldInputWidth'\n  | 'rightActions'\n>;\ntype OmitFormFieldProps<T extends ImplementsFormField> = Omit<T, keyof ExtractFormFieldProps<T>>;\n\n/**\n * Helper to split out props that are sent to the FormField component from props sent\n * to the underlying input component.\n */\nexport const splitOutFormFieldProps = <T extends ImplementsFormField>(\n  props: T,\n): {\n  formFieldProps: ExtractFormFieldProps<T>;\n  inputProps: OmitFormFieldProps<T>;\n} => {\n  const {\n    label,\n    inputId,\n    helperText,\n    errorText,\n    warningText,\n    labelProps,\n    helperProps,\n    warningProps,\n    errorProps,\n    configField,\n    configFieldInputWidth,\n    rightActions,\n    ...inputProps\n  } = props;\n\n  return {\n    formFieldProps: {\n      label,\n      inputId,\n      helperText,\n      errorText,\n      warningText,\n      labelProps,\n      helperProps,\n      warningProps,\n      errorProps,\n      configField,\n      configFieldInputWidth,\n      rightActions,\n    },\n    inputProps,\n  };\n};\n\nexport interface TextFieldProps extends ImplementsFormField, InputProps {}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField(props, ref) {\n    const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n    const { id, ...rest } = inputProps;\n\n    return (\n      <FormField\n        {...formFieldProps}\n        labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n        inputId={formFieldProps.inputId ?? id}\n      >\n        <Input {...rest} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface TextAreaFieldProps extends ImplementsFormField, TextAreaProps {}\n\nexport const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n  function TextAreaField(props, ref) {\n    const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n    const { id, ...rest } = inputProps;\n\n    return (\n      <FormField\n        {...formFieldProps}\n        labelProps={{ size: props.size, ...formFieldProps.labelProps }}\n        inputId={formFieldProps.inputId ?? id}\n      >\n        <TextArea {...rest} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({ id, children, ...props }: SelectFieldProps) => {\n  const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n  const linkedId = useMemo(\n    () => formFieldProps.inputId ?? id ?? uniqueId('pds-form-field-input-fields-select__'),\n    [formFieldProps.inputId, id],\n  );\n\n  return (\n    <FormField\n      {...formFieldProps}\n      inputId={linkedId}\n      labelProps={{ htmlFor: linkedId, size: inputProps.size, ...formFieldProps.labelProps }}\n    >\n      <Select {...inputProps} id={linkedId}>\n        {children}\n      </Select>\n    </FormField>\n  );\n};\n\nexport interface RadioGroupFieldProps\n  extends Omit<ImplementsFormField, 'configField'>, RadioGroupProps {}\n\nexport const RadioGroupField = ({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  children,\n  ...props\n}: RadioGroupFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n    >\n      <RadioGroup {...props}>{children}</RadioGroup>\n    </FormField>\n  );\n};\n\nexport interface CheckboxFieldProps extends ImplementsFormField, CheckboxProps {\n  checkboxLabel?: CheckboxProps['label'];\n}\n\nexport const CheckboxField = ({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  checkboxLabel,\n  configField,\n  labelProps,\n  ...props\n}: CheckboxFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n      labelProps={labelProps}\n    >\n      <Checkbox label={checkboxLabel} {...props} />\n    </FormField>\n  );\n};\n\nexport interface ToggleFieldProps extends ImplementsFormField, ToggleProps {}\n\nexport const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(\n  function ToggleField(props, ref) {\n    const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n    return (\n      <FormField\n        {...formFieldProps}\n        labelProps={{ size: inputProps.size, ...formFieldProps.labelProps }}\n      >\n        <Toggle {...inputProps} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface SegmentedControlFieldProps\n  extends ImplementsFormField, Omit<SegmentedControlProps, 'children'> {\n  children?: SegmentedControlProps['children'];\n}\n\nexport const SegmentedControlField = forwardRef<HTMLDivElement, SegmentedControlFieldProps>(\n  function SegmentedControlField(\n    { label, helperText, errorText, warningText, configField, children, labelProps, ...props },\n    ref,\n  ) {\n    return (\n      <FormField\n        label={label}\n        helperText={helperText}\n        warningText={warningText}\n        errorText={errorText}\n        configField={configField}\n        labelProps={labelProps}\n      >\n        <SegmentedControl fullWidth {...props} ref={ref}>\n          {children}\n        </SegmentedControl>\n      </FormField>\n    );\n  },\n);\n\nexport type ComboboxSingleSelectFieldProps<T = string> = ImplementsFormField &\n  ComboboxSingleSelectProps<T>;\nexport type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField &\n  ComboboxMultiSelectProps<T>;\n\nexport const ComboboxField = (\n  props: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps,\n) => {\n  // `Combobox` registers its own id with the surrounding `FormControl`, which is what links the\n  // label to it, so the field only forwards an explicit `inputId` when one is given. Each mode is\n  // split separately: `multiple` discriminates the two, and a union split at once loses that.\n  if (props.multiple) {\n    const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n    return (\n      <FormField {...formFieldProps}>\n        <Combobox {...inputProps} />\n      </FormField>\n    );\n  }\n\n  const { formFieldProps, inputProps } = splitOutFormFieldProps(props);\n\n  return (\n    <FormField {...formFieldProps}>\n      <Combobox {...inputProps} />\n    </FormField>\n  );\n};\n","import {\n  Children,\n  cloneElement,\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\nimport {\n  type AriaCheckboxGroupProps,\n  mergeProps,\n  useCheckboxGroup,\n  useCheckboxGroupItem,\n} from 'react-aria';\nimport innerText from 'react-innertext';\nimport { type CheckboxGroupState, useCheckboxGroupState } from 'react-stately';\n\nimport type { CheckboxProps } from 'design-system/components/Checkbox';\nimport type Checkbox from 'design-system/components/Checkbox';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst CheckboxGroupContext = createContext<CheckboxGroupState>(null);\n\n/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears\n *  inputId so each Checkbox inside the group generates its own unique id. */\nconst ClearGroupInputId = ({ children }: { children: ReactNode }) => {\n  const parentContext = useContext(FormControlContext);\n  return (\n    <FormControlContext.Provider value={{ ...parentContext, inputId: undefined }}>\n      {children}\n    </FormControlContext.Provider>\n  );\n};\n\ninterface CheckboxGroupItemProps {\n  children: ReactElement<ComponentPropsWithRef<typeof Checkbox>>;\n}\n\nconst CheckboxGroupItem = (props: CheckboxGroupItemProps) => {\n  const { children } = props;\n  const checkboxProps = children.props;\n\n  const state = useContext(CheckboxGroupContext);\n  const ref = useRef();\n  const { inputProps } = useCheckboxGroupItem(\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    {\n      ...checkboxProps,\n      onChange: undefined,\n      isDisabled: checkboxProps.disabled,\n      isReadOnly: checkboxProps.readOnly,\n      isRequired: checkboxProps.required,\n      isIndeterminate: checkboxProps.indeterminate,\n      value: String(children.props.value),\n      'aria-label': innerText(checkboxProps.label),\n    },\n    state,\n    ref,\n  );\n\n  return cloneElement(\n    children,\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    mergeProps(inputProps, {\n      onChange: checkboxProps.onChange,\n      disabled: state.isDisabled || checkboxProps.disabled,\n      checked: state.isSelected(String(inputProps.value)),\n      ref,\n    } as ComponentPropsWithRef<typeof Checkbox>),\n  );\n};\n\ninterface CheckboxGroupFieldProps\n  extends\n    Omit<ImplementsFormField, 'configField'>,\n    Omit<\n      AriaCheckboxGroupProps,\n      'description' | 'disabled' | 'isReadOnly' | 'isRequired' | 'errorMessage'\n    > {\n  children?: ReactElement<CheckboxProps>[];\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n}\n\nconst CheckboxGroupField = ({\n  children,\n  name,\n  onChange,\n  disabled,\n  readOnly,\n  required,\n  ...props\n}: CheckboxGroupFieldProps) => {\n  const reactAriaProps = {\n    ...props,\n    description: props.helperText,\n    errorMessage: props.errorText,\n    onChange,\n    name,\n    isDisabled: disabled,\n    isReadOnly: readOnly,\n    isRequired: required,\n  };\n  const state = useCheckboxGroupState(reactAriaProps);\n  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(\n    reactAriaProps,\n    state,\n  );\n\n  return (\n    <FormField\n      labelProps={labelProps}\n      helperProps={descriptionProps}\n      errorProps={errorMessageProps}\n      disabled={disabled}\n      {...groupProps}\n      {...props}\n    >\n      <ClearGroupInputId>\n        <CheckboxGroupContext.Provider value={state}>\n          {Children.map(children, (checkbox) => (\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            <CheckboxGroupItem>{checkbox}</CheckboxGroupItem>\n          ))}\n        </CheckboxGroupContext.Provider>\n      </ClearGroupInputId>\n    </FormField>\n  );\n};\n\nexport default CheckboxGroupField;\n","import { type ReactNode, useState } from 'react';\n\nimport { MoreIcon, PlusIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport FormField from 'design-system/components/FormField/FormField';\nimport type { ImplementsFormField } from 'design-system/components/FormField/inputFields';\nimport ListBox, { type ListBoxProps } from 'design-system/components/ListBox';\nimport type { MenuItemProps } from 'design-system/components/Menu';\n\ninterface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;\n}\n\ninterface AddDropdownConfig {\n  options: ({ label: ReactNode; value: string } & Omit<MenuItemProps, 'children'>)[];\n  onSelection: (value: string) => void;\n}\n\ninterface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {\n  actions?: ListBoxFieldAction[];\n  addDropdownConfig?: AddDropdownConfig;\n  /** Disables the add button, e.g. while the list is read-only. */\n  addDisabled?: boolean;\n}\n\nconst ListBoxField = <T extends object>({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  labelProps,\n  helperProps,\n  errorProps,\n  warningProps,\n  inputId,\n  onAdd,\n  onDelete,\n  deleteDisabled,\n  configField: configFieldProp,\n  size = 'md',\n  actions = [],\n  addDropdownConfig,\n  addDisabled,\n  selectedKeys: selectedKeysProp,\n  onSelectionChange,\n  defaultSelectedKeys,\n  ...props\n}: ListBoxFieldProps<T>) => {\n  const { configField } = useFormGroup({ configField: configFieldProp });\n  const menuActions: ListBoxFieldAction[] = [...actions];\n  const [selectedKeysState, setSelectedKeys] = useState(defaultSelectedKeys);\n  const selectedKeys = selectedKeysProp ?? selectedKeysState;\n  const effectiveSize = configField ? 'sm' : size;\n\n  if (onDelete) {\n    menuActions.unshift({\n      label: 'Delete',\n      onClick: () => onDelete(selectedKeys),\n      disabled:\n        deleteDisabled ||\n        selectedKeys == null ||\n        (typeof selectedKeys === 'object' && [...selectedKeys].length === 0),\n    });\n  }\n\n  const addButton = (\n    <IconButton size='sm' onClick={onAdd} aria-label='Add item to list' disabled={addDisabled}>\n      <PlusIcon />\n    </IconButton>\n  );\n\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      errorText={errorText}\n      warningText={warningText}\n      labelProps={labelProps}\n      helperProps={helperProps}\n      errorProps={errorProps}\n      warningProps={warningProps}\n      inputId={inputId}\n      configField={configField}\n      rightActions={\n        configField && (\n          <>\n            {menuActions.length > 0 && (\n              <DropdownMenu\n                trigger={\n                  <IconButton aria-label='Actions' size='sm'>\n                    <MoreIcon />\n                  </IconButton>\n                }\n                portal\n              >\n                {menuActions.map((action) => (\n                  <DropdownMenu.Item\n                    key={action.label}\n                    {...action}\n                    onClick={() => action.onClick(selectedKeys)}\n                    size={effectiveSize}\n                  >\n                    {action.label}\n                  </DropdownMenu.Item>\n                ))}\n              </DropdownMenu>\n            )}\n            {onAdd && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} align='start' portal>\n                {addDropdownConfig.options.map((option) => (\n                  <DropdownMenu.Item\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size={effectiveSize}\n                  >\n                    {option.label}\n                  </DropdownMenu.Item>\n                ))}\n              </DropdownMenu>\n            )}\n          </>\n        )\n      }\n    >\n      <ListBox\n        id={inputId}\n        fullWidth={configField}\n        size={effectiveSize}\n        deleteDisabled={deleteDisabled}\n        // We have to control the keys so we can power the `rightActions`\n        selectedKeys={selectedKeys}\n        onSelectionChange={(keys) => {\n          onSelectionChange?.(keys);\n          setSelectedKeys(keys);\n        }}\n        {...props}\n      />\n    </FormField>\n  );\n};\n\nexport default ListBoxField;\n","import { Fragment, type MouseEvent, type ReactNode, useState } from 'react';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport { useFormGroup } from '@persona/design-system/components/ConfigFormGroup';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport type { FormLabelProps } from '@persona/design-system/components/FormControl';\nimport type { MenuItemProps } from '@persona/design-system/components/Menu';\nimport TableBox, { type TableBoxProps } from '@persona/design-system/components/TableBox';\nimport { MoreIcon, PlusIcon } from '@persona/icons';\n\nimport FormField from './FormField';\nimport type { ImplementsFormField } from './inputFields';\n\nexport interface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\n\nexport interface TableBoxFieldActionGroup {\n  type: 'group';\n  heading: string;\n  actions: TableBoxFieldAction[];\n}\n\nexport type TableBoxFieldActionEntry = TableBoxFieldAction | TableBoxFieldActionGroup;\n\n/** Aria-label on TableBoxField's + button. Consumers that style or detect that\n *  button (e.g. popover toggle guards) should import this rather than redefining it. */\nexport const TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL = 'Add item to table';\n\nconst isActionGroup = (action: TableBoxFieldActionEntry): action is TableBoxFieldActionGroup =>\n  'type' in action && action.type === 'group';\n\ninterface AddDropdownConfig {\n  options: Array<{ label: string; value: string }>;\n  onSelection: (value: string) => void;\n}\n\ninterface TableBoxFieldProps<T extends object = object>\n  extends ImplementsFormField, Omit<TableBoxProps<T>, 'aria-label' | 'onCreateNewRow'> {\n  onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: (selectedKey: string | null) => void;\n  deleteDisabled?: boolean;\n  /** Actions and labeled action groups rendered in order. Empty groups are omitted. */\n  actions?: TableBoxFieldActionEntry[];\n  addDropdownConfig?: AddDropdownConfig;\n\n  /**\n   * Callback to create a new row and add it to the rows array\n   * Should return the id of the newly created row\n   */\n  createNewRow?: () => string;\n  children?: ReactNode;\n}\n\nconst TableBoxField = <T extends object = object>({\n  label,\n  helperText,\n  errorText,\n  warningText,\n  labelProps: labelPropsProp,\n  helperProps,\n  errorProps,\n  warningProps,\n  inputId,\n  onAdd,\n  onDelete,\n  deleteDisabled,\n  configField: configFieldProp = true,\n  actions = [],\n  addDropdownConfig,\n  selectedKey: selectedKeyProp,\n  onSelectionChange,\n  defaultSelectedKey,\n  selectionMode,\n  disabled,\n  createNewRow,\n  children,\n  emptyText = 'No data',\n  ...props\n}: TableBoxFieldProps<T>) => {\n  const { configField } = useFormGroup({ configField: configFieldProp });\n  const menuActions: TableBoxFieldActionEntry[] = [...actions];\n  const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);\n  const selectedKey = selectedKeyProp ?? selectedKeyState;\n  const [newRowId, setNewRowId] = useState<string | null>(null);\n  const labelProps: FormLabelProps = { size: 'sm', ...labelPropsProp };\n\n  const handleCreateNewRow = () => {\n    if (createNewRow) {\n      setNewRowId(createNewRow());\n    }\n  };\n\n  // Handle add button click\n  const handleAddClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (createNewRow) {\n      handleCreateNewRow();\n    } else if (onAdd) {\n      onAdd(e);\n    }\n  };\n\n  if (onDelete) {\n    menuActions.unshift({\n      label: 'Delete',\n      onClick: () => selectedKey && onDelete(selectedKey),\n      disabled: deleteDisabled || selectedKey == null,\n    });\n  }\n  const visibleMenuActions = menuActions.filter(\n    (action) => !isActionGroup(action) || action.actions.length > 0,\n  );\n\n  const addButton = (\n    <IconButton\n      size='sm'\n      onClick={handleAddClick}\n      aria-label={TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL}\n      disabled={disabled}\n    >\n      <PlusIcon />\n    </IconButton>\n  );\n\n  return (\n    <FormField\n      label={label}\n      helperText={helperText}\n      errorText={errorText}\n      warningText={warningText}\n      labelProps={labelProps}\n      helperProps={helperProps}\n      errorProps={errorProps}\n      warningProps={warningProps}\n      inputId={inputId}\n      rightActions={\n        configField && (\n          <>\n            {visibleMenuActions.length > 0 && (\n              <DropdownMenu\n                trigger={\n                  <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n                    <MoreIcon />\n                  </IconButton>\n                }\n                portal\n              >\n                {visibleMenuActions.map((entry, entryIndex) => {\n                  const previousEntry = visibleMenuActions[entryIndex - 1];\n                  if (isActionGroup(entry)) {\n                    return (\n                      <Fragment key={`${entry.heading}-${entryIndex}`}>\n                        {entryIndex > 0 && <DropdownMenu.Divider />}\n                        <DropdownMenu.Heading size='sm'>{entry.heading}</DropdownMenu.Heading>\n                        {entry.actions.map((action) => (\n                          <DropdownMenu.Item\n                            key={action.label}\n                            {...action}\n                            disabled={disabled || action.disabled}\n                            onClick={() => action.onClick(selectedKey)}\n                            size='sm'\n                          >\n                            {action.label}\n                          </DropdownMenu.Item>\n                        ))}\n                      </Fragment>\n                    );\n                  }\n\n                  return (\n                    <Fragment key={`${entry.label}-${entryIndex}`}>\n                      {previousEntry && isActionGroup(previousEntry) && <DropdownMenu.Divider />}\n                      <DropdownMenu.Item\n                        {...entry}\n                        disabled={disabled || entry.disabled}\n                        onClick={() => entry.onClick(selectedKey)}\n                        size='sm'\n                      >\n                        {entry.label}\n                      </DropdownMenu.Item>\n                    </Fragment>\n                  );\n                })}\n              </DropdownMenu>\n            )}\n            {(onAdd || createNewRow) && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} portal>\n                {addDropdownConfig.options.map((option) => (\n                  <DropdownMenu.Item\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size='sm'\n                  >\n                    {option.label}\n                  </DropdownMenu.Item>\n                ))}\n              </DropdownMenu>\n            )}\n          </>\n        )\n      }\n    >\n      <TableBox\n        aria-label={`${label} table`}\n        // We have to control the keys so we can power the `rightActions`\n        selectedKey={selectedKey}\n        onSelectionChange={(key) => {\n          onSelectionChange?.(key);\n          setSelectedKey(key);\n        }}\n        selectionMode={selectionMode}\n        newRowId={newRowId}\n        onCreateNewRow={createNewRow ? handleCreateNewRow : undefined}\n        emptyText={emptyText}\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </TableBox>\n    </FormField>\n  );\n};\n\n// Attach subcomponents to TableBoxField\nTableBoxField.Row = TableBox.Row;\nTableBoxField.Cell = TableBox.Cell;\n\nexport default TableBoxField;\n"],"mappings":"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"}

package/dist/FormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-BcaFdmo5.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-C1DaUT5U.mjs";
 export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/{Header-BjSoTEX_.d.mts → Header-BKk3qESS.d.mts}

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region components/Card/Header/Header.d.ts
@@ -32,4 +32,4 @@ declare const Root: ({
 }: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Root as a, HeaderProps as i, Header as n, Title as o, HeaderContainer as r, TitleContainer as s, ActionsContainer as t };
-//# sourceMappingURL=Header-BjSoTEX_.d.mts.map
+//# sourceMappingURL=Header-BKk3qESS.d.mts.map

package/dist/Header.d.mts

@@ -1,2 +1,2 @@
-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 { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-BKk3qESS.mjs";
 export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/{HelperTooltip-S20wVFCS.d.mts → HelperTooltip-CD_yy7Hp.d.mts}

@@ -1,4 +1,4 @@
-import { i as TooltipWithIconProps } from "./Tooltip-DabloV0o.mjs";
+import { i as TooltipWithIconProps } from "./Tooltip-n3XkX4dp.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -17,4 +17,4 @@ declare const HelperTooltip: ({
 }: HelperTooltipProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { HelperTooltipProps as n, HelperTooltip as t };
-//# sourceMappingURL=HelperTooltip-S20wVFCS.d.mts.map
+//# sourceMappingURL=HelperTooltip-CD_yy7Hp.d.mts.map

package/dist/HelperTooltip.d.mts

@@ -1,2 +1,2 @@
-import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-S20wVFCS.mjs";
+import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-CD_yy7Hp.mjs";
 export { HelperTooltipProps, HelperTooltip as default };

package/dist/{HoverCopyableField-GMXeF-3J.mjs → HoverCopyableField-Bgt639FR.mjs}

@@ -1,10 +1,10 @@
 import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
+import "./variables/transitions.mjs";
 import { t as Card_default } from "./Card-CKrJtn1f.mjs";
 import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
 import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
-import "./variables/transitions.mjs";
-import { n as Button } from "./IconButton-BgL3QUVO.mjs";
+import { n as Button } from "./IconButton-BnSEV7eR.mjs";
 import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -111,4 +111,4 @@ const HoverCopyableField = ({ copyValue, confirmationText = "Copied", onCopySucc
 //#endregion
 export { HoverCopyableField as t };
 
-//# sourceMappingURL=HoverCopyableField-GMXeF-3J.mjs.map
+//# sourceMappingURL=HoverCopyableField-Bgt639FR.mjs.map

package/dist/{HoverCopyableField-GMXeF-3J.mjs.map → HoverCopyableField-Bgt639FR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"HoverCopyableField-GMXeF-3J.mjs","names":["Card","Popover"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type CopySuccessDetail = {\n  text: string;\n  clientX: number;\n  clientY: number;\n};\n\nexport type HoverCopyableFieldProps = {\n  copyValue: string | undefined;\n  confirmationText?: string;\n  /**\n   * Called after a successful clipboard write. When provided, the Copied\n   * popover is skipped so the host can own post-copy UX.\n   */\n  onCopySuccess?: (detail: CopySuccessDetail) => void;\n  children: ReactNode;\n};\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n  try {\n    if ('clipboard' in navigator) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    } else {\n      return document.execCommand('copy', true, text);\n    }\n  } catch {\n    return false;\n  }\n};\n\nconst clickOrigin = (e: MouseEvent<HTMLButtonElement>): { clientX: number; clientY: number } => {\n  const rect = e.currentTarget.getBoundingClientRect();\n  const hasPointer = e.clientX !== 0 || e.clientY !== 0;\n  return {\n    clientX: hasPointer ? e.clientX : rect.left + rect.width / 2,\n    clientY: rect.top,\n  };\n};\n\nconst CopyableFieldContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n  type: 'button',\n  variant: 'inverse',\n  width: 'icon',\n}))<{ isActive: boolean }>`\n  height: ${Spacing[5]};\n  width: ${Spacing[5]};\n  visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  padding: 6px;\n  margin: 0;\n`;\n\nconst HoverCopyableField = ({\n  copyValue,\n  confirmationText = 'Copied',\n  onCopySuccess,\n  children,\n}: HoverCopyableFieldProps) => {\n  const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n  const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n    useToggle(false);\n\n  const copyTextToClipboard = async (origin: { clientX: number; clientY: number }) => {\n    if (copyValue == null) {\n      return;\n    }\n    const copyWasSuccessful = await copyToClipboard(copyValue);\n    if (!copyWasSuccessful) {\n      return;\n    }\n    if (onCopySuccess) {\n      onCopySuccess({ text: copyValue, ...origin });\n      hideCopyButton();\n      return;\n    }\n    showConfirmation();\n    setTimeout(() => {\n      hideCopyButton();\n      hideConfirmation();\n    }, 1200);\n  };\n\n  const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    void copyTextToClipboard(clickOrigin(e));\n  };\n\n  return copyValue != null && copyValue.trim().length > 0 ? (\n    <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n      {children}\n      <Popover open={confirmationActive}>\n        <Popover.Anchor asChild>\n          <CopyButton\n            id='hover-copyable-field__copy-button'\n            isActive={copyButtonActive || confirmationActive}\n            onClick={copyField}\n          >\n            <CopyIcon width={16} height={16} />\n          </CopyButton>\n        </Popover.Anchor>\n        <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n          <StyledCard elevated>\n            <Paragraph>{confirmationText}</Paragraph>\n          </StyledCard>\n        </Popover.Content>\n      </Popover>\n    </CopyableFieldContainer>\n  ) : null;\n};\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,eAAe,MAA2E;CAC9F,MAAM,OAAO,EAAE,cAAc,uBAAuB;AAEpD,QAAO;EACL,SAFiB,EAAE,YAAY,KAAK,EAAE,YAAY,IAE5B,EAAE,UAAU,KAAK,OAAO,KAAK,QAAQ;EAC3D,SAAS,KAAK;EACf;;AAGH,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAKnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eACA,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,OAAO,WAAiD;AAClF,MAAI,aAAa,KACf;AAGF,MAAI,CAAC,MAD2B,gBAAgB,UAAU,CAExD;AAEF,MAAI,eAAe;AACjB,iBAAc;IAAE,MAAM;IAAW,GAAG;IAAQ,CAAC;AAC7C,mBAAgB;AAChB;;AAEF,oBAAkB;AAClB,mBAAiB;AACf,mBAAgB;AAChB,qBAAkB;KACjB,KAAK;;CAGV,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACd,sBAAoB,YAAY,EAAE,CAAC;;AAG1C,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB"}
+{"version":3,"file":"HoverCopyableField-Bgt639FR.mjs","names":["Card","Popover"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport type CopySuccessDetail = {\n  text: string;\n  clientX: number;\n  clientY: number;\n};\n\nexport type HoverCopyableFieldProps = {\n  copyValue: string | undefined;\n  confirmationText?: string;\n  /**\n   * Called after a successful clipboard write. When provided, the Copied\n   * popover is skipped so the host can own post-copy UX.\n   */\n  onCopySuccess?: (detail: CopySuccessDetail) => void;\n  children: ReactNode;\n};\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n  try {\n    if ('clipboard' in navigator) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    } else {\n      return document.execCommand('copy', true, text);\n    }\n  } catch {\n    return false;\n  }\n};\n\nconst clickOrigin = (e: MouseEvent<HTMLButtonElement>): { clientX: number; clientY: number } => {\n  const rect = e.currentTarget.getBoundingClientRect();\n  const hasPointer = e.clientX !== 0 || e.clientY !== 0;\n  return {\n    clientX: hasPointer ? e.clientX : rect.left + rect.width / 2,\n    clientY: rect.top,\n  };\n};\n\nconst CopyableFieldContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n  type: 'button',\n  variant: 'inverse',\n  width: 'icon',\n}))<{ isActive: boolean }>`\n  height: ${Spacing[5]};\n  width: ${Spacing[5]};\n  visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  padding: 6px;\n  margin: 0;\n`;\n\nconst HoverCopyableField = ({\n  copyValue,\n  confirmationText = 'Copied',\n  onCopySuccess,\n  children,\n}: HoverCopyableFieldProps) => {\n  const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n  const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n    useToggle(false);\n\n  const copyTextToClipboard = async (origin: { clientX: number; clientY: number }) => {\n    if (copyValue == null) {\n      return;\n    }\n    const copyWasSuccessful = await copyToClipboard(copyValue);\n    if (!copyWasSuccessful) {\n      return;\n    }\n    if (onCopySuccess) {\n      onCopySuccess({ text: copyValue, ...origin });\n      hideCopyButton();\n      return;\n    }\n    showConfirmation();\n    setTimeout(() => {\n      hideCopyButton();\n      hideConfirmation();\n    }, 1200);\n  };\n\n  const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    void copyTextToClipboard(clickOrigin(e));\n  };\n\n  return copyValue != null && copyValue.trim().length > 0 ? (\n    <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n      {children}\n      <Popover open={confirmationActive}>\n        <Popover.Anchor asChild>\n          <CopyButton\n            id='hover-copyable-field__copy-button'\n            isActive={copyButtonActive || confirmationActive}\n            onClick={copyField}\n          >\n            <CopyIcon width={16} height={16} />\n          </CopyButton>\n        </Popover.Anchor>\n        <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n          <StyledCard elevated>\n            <Paragraph>{confirmationText}</Paragraph>\n          </StyledCard>\n        </Popover.Content>\n      </Popover>\n    </CopyableFieldContainer>\n  ) : null;\n};\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,eAAe,MAA2E;CAC9F,MAAM,OAAO,EAAE,cAAc,uBAAuB;AAEpD,QAAO;EACL,SAFiB,EAAE,YAAY,KAAK,EAAE,YAAY,IAE5B,EAAE,UAAU,KAAK,OAAO,KAAK,QAAQ;EAC3D,SAAS,KAAK;EACf;;AAGH,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAKnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eACA,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,OAAO,WAAiD;AAClF,MAAI,aAAa,KACf;AAGF,MAAI,CAAC,MAD2B,gBAAgB,UAAU,CAExD;AAEF,MAAI,eAAe;AACjB,iBAAc;IAAE,MAAM;IAAW,GAAG;IAAQ,CAAC;AAC7C,mBAAgB;AAChB;;AAEF,oBAAkB;AAClB,mBAAiB;AACf,mBAAgB;AAChB,qBAAkB;KACjB,KAAK;;CAGV,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACd,sBAAoB,YAAY,EAAE,CAAC;;AAG1C,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB"}

package/dist/{IconButton-BpyOr8Ev.d.mts → IconButton-Bh-JJ-0x.d.mts}

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-BrI1s2-r.mjs";
+import { r as ButtonProps } from "./Button-CRFbWv3l.mjs";
 import * as _$react from "react";
 
 //#region components/Button/IconButton.d.ts
@@ -21,4 +21,4 @@ interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'pr
 declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-BpyOr8Ev.d.mts.map
+//# sourceMappingURL=IconButton-Bh-JJ-0x.d.mts.map

package/dist/{IconButton-BgL3QUVO.mjs → IconButton-BnSEV7eR.mjs}

@@ -1,11 +1,11 @@
 import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
-import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
-import { rotate } from "./variables/keyframes.mjs";
-import "./variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
 import { printMixins } from "./mixins/print/index.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
+import { rotate } from "./variables/keyframes.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { forwardRef, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -338,4 +338,4 @@ const IconButton = forwardRef(function IconButton({ size = "xs", ...props }, ref
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, Button as n, ButtonChildren as r, IconButton as t };
 
-//# sourceMappingURL=IconButton-BgL3QUVO.mjs.map
+//# sourceMappingURL=IconButton-BnSEV7eR.mjs.map

package/dist/{IconButton-BgL3QUVO.mjs.map → IconButton-BnSEV7eR.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"IconButton-BgL3QUVO.mjs","names":["noop"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  md: css`\n    ${paragraphMixins.md}\n    height: ${({ theme }) => theme.button.height.md};\n    padding: ${Spacing[2]};\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n    height: ${({ theme }) => theme.button.height.sm};\n    padding: ${Spacing[1]} 6px;\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n};\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  full: css`\n    width: 100%;\n  `,\n  auto: css`\n    width: auto;\n  `,\n  // TODO: rename this prop to 'element' as a standard unresponsive element width\n  button: css`\n    width: ${({ theme }) => theme.element.width.md};\n  `,\n  icon: css<ButtonProps>`\n    width: ${({ theme, size }) => {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      return theme.button.height[size];\n    }};\n    padding: 0;\n    flex: none;\n  `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n  $isPending: boolean;\n  $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n  if (isEmpty(to)) {\n    return 'button';\n  } else if (typeof to === 'string' && to.startsWith('https://')) {\n    return {\n      as: 'a',\n      href: to,\n      target: target ?? '_blank',\n      rel: 'noreferrer',\n    };\n  } else {\n    return {\n      as: Link,\n    };\n  }\n})<ButtonPropsWithTransientProps>`\n  cursor: pointer;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  ${({ theme, variant }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const palette = theme.color.variants[variant] as any;\n    return css`\n      &:disabled {\n        background-color: ${palette.disabled};\n        color: ${palette.textDisabled};\n        svg path {\n          stroke: ${palette.textDisabled};\n        }\n\n        /* For backwards compatibility with current coloring scheme (targeting stroke property) */\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          /* Support icons with stroke */\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n\n        user-select: none;\n      }\n    `;\n  }}\n\n  ${({ variant }) =>\n    variant === 'outline' &&\n    css`\n      border: 1px solid ${({ theme }) => theme.color.border.input};\n    `}\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* To properly position loading spinner */\n  position: relative;\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  ${({ size }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return sizeStyles[size];\n  }}\n  ${({ width }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return widthStyles[width];\n  }}\n\n  /* Variant styling */\n  ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    let palette = theme.color.variants[variant] as any;\n\n    if (variant === 'basic' && $onSecondaryBackground) {\n      palette = {\n        ...palette,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        default: Color.CoreSlate300,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        hover: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        active: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        disabled: Color.CoreSlate100,\n      };\n    }\n\n    return css`\n      background-color: ${palette.default};\n      color: ${palette.text};\n      svg path {\n        stroke: ${palette.text};\n      }\n\n      svg.pds-icon {\n        path {\n          stroke: unset;\n        }\n\n        path[stroke] {\n          stroke: currentColor;\n        }\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${palette.hover};\n      }\n\n      &${isDisabled} {\n        cursor: not-allowed;\n      }\n\n      &${isActive} {\n        background-color: ${palette.active};\n      }\n\n      ${focusOutlineControlled}\n\n      ${\n        $isPending &&\n        css`\n        cursor: default;\n        background-color: ${palette.active};\n        &:disabled {\n          background-color: ${({ theme }) => {\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return theme.color.variants[variant].active;\n          }};\n          user-select: none;\n        }\n\n        svg path {\n          stroke: ${palette.highlightDark};\n        }\n\n        // For backwards compatibility with current coloring scheme (targeting stroke property)\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `\n      }\n    `;\n  }}\n\n\n  ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 2s;\n  opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n  animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n  ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  transition: opacity ${TransitionDuration.Fast};\n  opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n  gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  & svg {\n    width: inherit;\n    height: inherit;\n  }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n  margin-right: 0;\n  flex-grow: 1;\n  justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' | 'sm'; width: 'full' | 'auto' | 'button' | 'icon' }>`\n  position: relative;\n\n  /* Needed to align for browsers that don't support text-box yet\n  (which at this time, is firefox, and opera, and a few niche browsers)\n  This checks firefox. Otherwise, it will default back to the original\n  which is a slightly misaligned button\n  */\n\n  /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n  work */\n\n  line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n  @-moz-document url-prefix() {\n    top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n  }\n\n  @supports (text-box: cap alphabetic) {\n    text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n  }\n`;\n\ntype MaybePromise =\n  | ((e: MouseEvent<HTMLButtonElement>) => void)\n  | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n  extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n  /**\n   * Visual style of the button.\n   *\n   * - `primary` – filled brand colour, for the primary action on a surface.\n   * - `basic` – subtle grey fill, for secondary actions.\n   * - `outline` – transparent with a border, alternative secondary style.\n   * - `text` – no background or border, for tertiary / inline actions.\n   * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n   * - `danger` – red fill, for destructive actions.\n   *\n   * @defaultValue 'primary'\n   */\n  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\n  /**\n   * Shows a loading spinner and disables the button. Also triggers automatically\n   * when `onClick` returns a Promise, clearing once the promise settles.\n   */\n  isPending?: boolean;\n  /**\n   * Icon rendered to the left of the button label.\n   * Import from `@persona/icons`.\n   */\n  prefixIcon?: ReactNode;\n  /**\n   * Controls how the prefix icon inherits sizing.\n   *\n   * - `basic` – icon is rendered inside a fixed-size container.\n   * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n   *\n   * @defaultValue 'basic'\n   */\n  prefixIconType?: 'basic' | 'inherit';\n\n  /**\n   * Icon rendered to the right of the button label.\n   * Import from `@persona/icons`.\n   */\n  suffixIcon?: ReactNode;\n\n  /**\n   * Height and typography scale of the button.\n   *\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n\n  /**\n   * Changes the button into a link.\n   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n   * `https://` URL to render an `<a>` tag that opens in a new tab.\n   */\n  to?: LinkProps['to'];\n\n  /**\n   * Overrides the target of the link if `to` is provided and is an external link.\n   */\n  target?: LinkProps['target'];\n\n  /**\n   * Note: we may want to default this to 'button' in the future, but many instances of this Button component\n   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n   * so we'll have to comb through and manually add the type='submit' prop.\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Controls the width of the button.\n   *\n   * - `full` – stretches to fill its container (`width: 100%`).\n   * - `auto` – shrinks to fit its content.\n   * - `button` – a fixed medium element width (from design tokens).\n   * - `icon` – square, sized to match the button height; use for icon-only buttons.\n   *\n   * @defaultValue 'full'\n   */\n  width?: 'full' | 'auto' | 'button' | 'icon';\n  onClick?: MaybePromise;\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * In some cases we render a button on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    id,\n    children,\n    prefixIcon,\n    suffixIcon,\n    disabled,\n    isPending,\n    type = 'button',\n    prefixIconType = 'basic',\n    variant = 'primary',\n    size = 'md',\n    width = 'full',\n    onClick,\n    onSecondaryBackground,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const [isResolving, { enable, disable }] = useToggle(false);\n  const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n  const loading = isPending || isResolving;\n\n  const handleClick = useCallback(\n    async (e: MouseEvent<HTMLButtonElement>) => {\n      if (loading) {\n        return;\n      }\n\n      const maybePromise = innerOnClick(e);\n\n      if (maybePromise instanceof Promise) {\n        enable();\n        await maybePromise;\n        disable();\n      }\n    },\n    [loading, innerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      type={type}\n      data-test={'button__' + variant}\n      variant={variant}\n      size={size}\n      width={width}\n      disabled={disabled || loading}\n      $isPending={loading}\n      $onSecondaryBackground={onSecondaryBackground}\n      {...props}\n      onClick={handleClick}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer isPending={loading}>\n          <Loader aria-label={`Loading ${props['aria-label'] || ''}`} />\n        </LoaderContainer>\n      )}\n      <ButtonChildren isPending={loading}>\n        {prefixIcon != null && (\n          <>\n            {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n            {prefixIconType === 'inherit' && (\n              <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n            )}\n          </>\n        )}\n        {children && (\n          <ButtonText width={width} size={size}>\n            {children}\n          </ButtonText>\n        )}\n        {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n      </ButtonChildren>\n    </StyledButton>\n  );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n  xs: '16px',\n  sm: '24px',\n  md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n  xs: '12px',\n  sm: '16px',\n  md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  border-radius: ${BorderRadius.Md};\n\n  ${({ size }) => css`\n    height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n    width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n    svg {\n      width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n      height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n    }\n  `}\n`;\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'\n> {\n  /**\n   * `xs` - 16px. `sm` - 24px. `md` - 32px.\n   * Pair with a PDS icon in the prescribed size.\n   */\n  size?: IconBtnSize;\n}\n\n/**\n * Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { size = 'xs', ...props },\n  ref,\n) {\n  return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"IconButton-BnSEV7eR.mjs","names":["noop"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash-es';\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  md: css`\n    ${paragraphMixins.md}\n    height: ${({ theme }) => theme.button.height.md};\n    padding: ${Spacing[2]};\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n    height: ${({ theme }) => theme.button.height.sm};\n    padding: ${Spacing[1]} 6px;\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  `,\n};\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n  full: css`\n    width: 100%;\n  `,\n  auto: css`\n    width: auto;\n  `,\n  // TODO: rename this prop to 'element' as a standard unresponsive element width\n  button: css`\n    width: ${({ theme }) => theme.element.width.md};\n  `,\n  icon: css<ButtonProps>`\n    width: ${({ theme, size }) => {\n      /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n      return theme.button.height[size];\n    }};\n    padding: 0;\n    flex: none;\n  `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n  $isPending: boolean;\n  $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n  if (isEmpty(to)) {\n    return 'button';\n  } else if (typeof to === 'string' && to.startsWith('https://')) {\n    return {\n      as: 'a',\n      href: to,\n      target: target ?? '_blank',\n      rel: 'noreferrer',\n    };\n  } else {\n    return {\n      as: Link,\n    };\n  }\n})<ButtonPropsWithTransientProps>`\n  cursor: pointer;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  ${({ theme, variant }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const palette = theme.color.variants[variant] as any;\n    return css`\n      &:disabled {\n        background-color: ${palette.disabled};\n        color: ${palette.textDisabled};\n        svg path {\n          stroke: ${palette.textDisabled};\n        }\n\n        /* For backwards compatibility with current coloring scheme (targeting stroke property) */\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          /* Support icons with stroke */\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n\n        user-select: none;\n      }\n    `;\n  }}\n\n  ${({ variant }) =>\n    variant === 'outline' &&\n    css`\n      border: 1px solid ${({ theme }) => theme.color.border.input};\n    `}\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* To properly position loading spinner */\n  position: relative;\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  transition-duration: ${TransitionDuration.Fast};\n  transition-property: background-color, color, border-color, width, height;\n\n  ${({ size }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return sizeStyles[size];\n  }}\n  ${({ width }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return widthStyles[width];\n  }}\n\n  /* Variant styling */\n  ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    let palette = theme.color.variants[variant] as any;\n\n    if (variant === 'basic' && $onSecondaryBackground) {\n      palette = {\n        ...palette,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        default: Color.CoreSlate300,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        hover: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        active: Color.CoreSlate400,\n        // eslint-disable-next-line rulesdir/no-core-color-tokens\n        disabled: Color.CoreSlate100,\n      };\n    }\n\n    return css`\n      background-color: ${palette.default};\n      color: ${palette.text};\n      svg path {\n        stroke: ${palette.text};\n      }\n\n      svg.pds-icon {\n        path {\n          stroke: unset;\n        }\n\n        path[stroke] {\n          stroke: currentColor;\n        }\n      }\n\n      &${isHovered}${isNotDisabled} {\n        background-color: ${palette.hover};\n      }\n\n      &${isDisabled} {\n        cursor: not-allowed;\n      }\n\n      &${isActive} {\n        background-color: ${palette.active};\n      }\n\n      ${focusOutlineControlled}\n\n      ${\n        $isPending &&\n        css`\n        cursor: default;\n        background-color: ${palette.active};\n        &:disabled {\n          background-color: ${({ theme }) => {\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return theme.color.variants[variant].active;\n          }};\n          user-select: none;\n        }\n\n        svg path {\n          stroke: ${palette.highlightDark};\n        }\n\n        // For backwards compatibility with current coloring scheme (targeting stroke property)\n        svg.pds-icon {\n          path {\n            stroke: unset;\n          }\n\n          path[stroke] {\n            stroke: currentColor;\n          }\n        }\n      `\n      }\n    `;\n  }}\n\n\n  ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 2s;\n  opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n  animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n  ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  transition: opacity ${TransitionDuration.Fast};\n  opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n  gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  & svg {\n    width: inherit;\n    height: inherit;\n  }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n  margin-right: 0;\n  flex-grow: 1;\n  justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' | 'sm'; width: 'full' | 'auto' | 'button' | 'icon' }>`\n  position: relative;\n\n  /* Needed to align for browsers that don't support text-box yet\n  (which at this time, is firefox, and opera, and a few niche browsers)\n  This checks firefox. Otherwise, it will default back to the original\n  which is a slightly misaligned button\n  */\n\n  /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n  work */\n\n  line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n  @-moz-document url-prefix() {\n    top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n  }\n\n  @supports (text-box: cap alphabetic) {\n    text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n  }\n`;\n\ntype MaybePromise =\n  | ((e: MouseEvent<HTMLButtonElement>) => void)\n  | ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n  extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n  /**\n   * Visual style of the button.\n   *\n   * - `primary` – filled brand colour, for the primary action on a surface.\n   * - `basic` – subtle grey fill, for secondary actions.\n   * - `outline` – transparent with a border, alternative secondary style.\n   * - `text` – no background or border, for tertiary / inline actions.\n   * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n   * - `danger` – red fill, for destructive actions.\n   *\n   * @defaultValue 'primary'\n   */\n  variant?: 'basic' | 'primary' | 'inverse' | 'danger' | 'text' | 'outline';\n  /**\n   * Shows a loading spinner and disables the button. Also triggers automatically\n   * when `onClick` returns a Promise, clearing once the promise settles.\n   */\n  isPending?: boolean;\n  /**\n   * Icon rendered to the left of the button label.\n   * Import from `@persona/icons`.\n   */\n  prefixIcon?: ReactNode;\n  /**\n   * Controls how the prefix icon inherits sizing.\n   *\n   * - `basic` – icon is rendered inside a fixed-size container.\n   * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n   *\n   * @defaultValue 'basic'\n   */\n  prefixIconType?: 'basic' | 'inherit';\n\n  /**\n   * Icon rendered to the right of the button label.\n   * Import from `@persona/icons`.\n   */\n  suffixIcon?: ReactNode;\n\n  /**\n   * Height and typography scale of the button.\n   *\n   * @defaultValue 'md'\n   */\n  size?: 'md' | 'sm';\n\n  /**\n   * Changes the button into a link.\n   * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n   * `https://` URL to render an `<a>` tag that opens in a new tab.\n   */\n  to?: LinkProps['to'];\n\n  /**\n   * Overrides the target of the link if `to` is provided and is an external link.\n   */\n  target?: LinkProps['target'];\n\n  /**\n   * Note: we may want to default this to 'button' in the future, but many instances of this Button component\n   * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n   * so we'll have to comb through and manually add the type='submit' prop.\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Controls the width of the button.\n   *\n   * - `full` – stretches to fill its container (`width: 100%`).\n   * - `auto` – shrinks to fit its content.\n   * - `button` – a fixed medium element width (from design tokens).\n   * - `icon` – square, sized to match the button height; use for icon-only buttons.\n   *\n   * @defaultValue 'full'\n   */\n  width?: 'full' | 'auto' | 'button' | 'icon';\n  onClick?: MaybePromise;\n  ref?: Ref<HTMLButtonElement>;\n\n  /**\n   * In some cases we render a button on a secondary background, which needs an adjustment\n   * for certain variants.\n   */\n  onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    id,\n    children,\n    prefixIcon,\n    suffixIcon,\n    disabled,\n    isPending,\n    type = 'button',\n    prefixIconType = 'basic',\n    variant = 'primary',\n    size = 'md',\n    width = 'full',\n    onClick,\n    onSecondaryBackground,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const [isResolving, { enable, disable }] = useToggle(false);\n  const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n  const loading = isPending || isResolving;\n\n  const handleClick = useCallback(\n    async (e: MouseEvent<HTMLButtonElement>) => {\n      if (loading) {\n        return;\n      }\n\n      const maybePromise = innerOnClick(e);\n\n      if (maybePromise instanceof Promise) {\n        enable();\n        await maybePromise;\n        disable();\n      }\n    },\n    [loading, innerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      type={type}\n      data-test={'button__' + variant}\n      variant={variant}\n      size={size}\n      width={width}\n      disabled={disabled || loading}\n      $isPending={loading}\n      $onSecondaryBackground={onSecondaryBackground}\n      {...props}\n      onClick={handleClick}\n      ref={ref}\n    >\n      {loading && (\n        <LoaderContainer isPending={loading}>\n          <Loader aria-label={`Loading ${props['aria-label'] || ''}`} />\n        </LoaderContainer>\n      )}\n      <ButtonChildren isPending={loading}>\n        {prefixIcon != null && (\n          <>\n            {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n            {prefixIconType === 'inherit' && (\n              <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n            )}\n          </>\n        )}\n        {children && (\n          <ButtonText width={width} size={size}>\n            {children}\n          </ButtonText>\n        )}\n        {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n      </ButtonChildren>\n    </StyledButton>\n  );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n  xs: '16px',\n  sm: '24px',\n  md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n  xs: '12px',\n  sm: '16px',\n  md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n  width: 'icon',\n  variant: 'basic',\n})`\n  background-color: transparent;\n  padding: 0;\n  border-radius: ${BorderRadius.Md};\n\n  ${({ size }) => css`\n    height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n    width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n    svg {\n      width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n      height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n    }\n  `}\n`;\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'\n> {\n  /**\n   * `xs` - 16px. `sm` - 24px. `md` - 32px.\n   * Pair with a PDS icon in the prescribed size.\n   */\n  size?: IconBtnSize;\n}\n\n/**\n * Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { size = 'xs', ...props },\n  ref,\n) {\n  return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,MAAMA,eAAmB,KAAA;AAGzB,MAAM,YAAY,EAAE,aAAgC,SAAS,KAAK;AAGlE,MAAM,aAA0F;CAC9F,IAAI,GAAG;MACH,gBAAgB,GAAG;eACV,EAAE,YAAY,MAAM,OAAO,OAAO,GAAG;eACrC,QAAQ,GAAG;;;;;;CAMxB,IAAI,GAAG;MACH,gBAAgB,GAAG;eACV,EAAE,YAAY,MAAM,OAAO,OAAO,GAAG;eACrC,QAAQ,GAAG;;;;;;CAMzB;AAGD,MAAM,cAA4F;CAChG,MAAM,GAAG;;;CAGT,MAAM,GAAG;;;CAIT,QAAQ,GAAG;cACC,EAAE,YAAY,MAAM,QAAQ,MAAM,GAAG;;CAEjD,MAAM,GAAgB;cACV,EAAE,OAAO,WAAW;AAE5B,SAAO,MAAM,OAAO,OAAO;GAC3B;;;;CAIL;AAOD,MAAa,eAAe,OAAO,OAAO,OAAsC,EAAE,IAAI,aAAa;AACjG,KAAI,QAAQ,GAAG,CACb,QAAO;UACE,OAAO,OAAO,YAAY,GAAG,WAAW,WAAW,CAC5D,QAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ,UAAU;EAClB,KAAK;EACN;KAED,QAAO,EACL,IAAI,MACL;EAEH;;;;;KAKG,EAAE,OAAO,cAAc;CAExB,MAAM,UAAU,MAAM,MAAM,SAAS;AACrC,QAAO,GAAG;;4BAEc,QAAQ,SAAS;iBAC5B,QAAQ,aAAa;;oBAElB,QAAQ,aAAa;;;;;;;;;;;;;;;;;;EAkBrC;;KAEC,EAAE,cACH,YAAY,aACZ,GAAG;2BACoB,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;MAC5D;;;;;;;;;oBASc,EAAE,YAAY,MAAM,OAAO,aAAa;;iCAEX;;;KAG5C,EAAE,WAAW;AAEd,QAAO,WAAW;EAClB;KACC,EAAE,YAAY;AAEf,QAAO,YAAY;EACnB;;;KAGC,EAAE,OAAO,SAAS,YAAY,6BAA6B;CAE5D,IAAI,UAAU,MAAM,MAAM,SAAS;AAEnC,KAAI,YAAY,WAAW,uBACzB,WAAU;EACR,GAAG;EAEH,SAAS,MAAM;EAEf,OAAO,MAAM;EAEb,QAAQ,MAAM;EAEd,UAAU,MAAM;EACjB;AAGH,QAAO,GAAG;0BACY,QAAQ,QAAQ;eAC3B,QAAQ,KAAK;;kBAEV,QAAQ,KAAK;;;;;;;;;;;;;SAatB,YAAY,cAAc;4BACP,QAAQ,MAAM;;;SAGjC,WAAW;;;;SAIX,SAAS;4BACU,QAAQ,OAAO;;;QAGnC,uBAAuB;;QAGvB,cACA,GAAG;;4BAEiB,QAAQ,OAAO;;+BAEZ,EAAE,YAAY;AAEjC,SAAO,MAAM,MAAM,SAAS,SAAS;GACrC;;;;;oBAKQ,QAAQ,cAAc;;;;;;;;;;;;;QAcnC;;EAEH;;;IAGA,YAAY,KAAK;;AAKrB,MAAM,kBAAkB,OAAO,GAAqB;;;;;;;;;cAStC,EAAE,gBAAiB,YAAY,MAAM,IAAK;;AAGxD,MAAM,SAAS,OAAO,WAAW;eAClB,OAAO;;AAGtB,MAAa,iBAAiB,OAAO,MAAM,CAAC,OAAO,EAAE,iBAAmC,GACrF,gBAAgB,WAClB,EAAE;;;;;;gCAM6C;cAClC,EAAE,gBAAiB,YAAY,MAAM,IAAK;SAC/C,QAAQ,GAAG;;AAGpB,MAAM,sBAAsB,OAAO,GAAG;;;;AAKtC,MAAM,6BAA6B,OAAO,GAAG;;;;;;;;;AAU7C,MAAa,sBAAsB,OAAO,oBAAoB;;;;;AAM9D,MAAM,aAAa,OAAO,IAAuE;;;;;;;;;;;;kBAY/E,EAAE,YAAa,UAAU,SAAS,MAAM,UAAW;;YAEzD,EAAE,WAAY,SAAS,OAAO,QAAQ,QAAS;;;;iBAI1C,EAAE,YAAa,UAAU,SAAS,WAAW,iBAAkB;;;AA+FhF,MAAM,SAAS,WAA2C,SAAS,OACjE,EACE,IACA,UACA,YACA,YACA,UACA,WACA,OAAO,UACP,iBAAiB,SACjB,UAAU,WACV,OAAO,MACP,QAAQ,QACR,SACA,uBACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,aAAa,EAAE,QAAQ,aAAa,UAAU,MAAM;CAC3D,MAAM,eAA6B,WAAW,QAAQ,GAAG,UAAUA;CACnE,MAAM,UAAU,aAAa;CAE7B,MAAM,cAAc,YAClB,OAAO,MAAqC;AAC1C,MAAI,QACF;EAGF,MAAM,eAAe,aAAa,EAAE;AAEpC,MAAI,wBAAwB,SAAS;AACnC,WAAQ;AACR,SAAM;AACN,YAAS;;IAGb,CAAC,SAAS,aAAa,CACxB;AAED,QACE,qBAAC,cAAD;EACM;EACE;EACN,aAAW,aAAa;EACf;EACH;EACC;EACP,UAAU,YAAY;EACtB,YAAY;EACZ,wBAAwB;EACxB,GAAI;EACJ,SAAS;EACJ;YAZP,CAcG,WACC,oBAAC,iBAAD;GAAiB,WAAW;aAC1B,oBAAC,QAAD,EAAQ,cAAY,WAAW,MAAM,iBAAiB,MAAQ,CAAA;GAC9C,CAAA,EAEpB,qBAAC,gBAAD;GAAgB,WAAW;aAA3B;IACG,cAAc,QACb,qBAAA,YAAA,EAAA,UAAA,CACG,mBAAmB,WAAW,oBAAC,qBAAD,EAAA,UAAsB,YAAiC,CAAA,EACrF,mBAAmB,aAClB,oBAAC,4BAAD,EAAA,UAA6B,YAAwC,CAAA,CAEtE,EAAA,CAAA;IAEJ,YACC,oBAAC,YAAD;KAAmB;KAAa;KAC7B;KACU,CAAA;IAEd,cAAc,QAAQ,oBAAC,qBAAD,EAAA,UAAsB,YAAiC,CAAA;IAC/D;KACJ;;EAEjB;;;AC/dF,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,MAAM,UAAU,OAAO,OAAO,CAAC,MAAM;CACnC,OAAO;CACP,SAAS;CACV,CAAC;;;mBAGiB,aAAa,GAAG;;KAE9B,EAAE,WAAW,GAAG;cACP,gBAAgB,MAAqB;aACtC,gBAAgB,MAAqB;;;eAGnC,cAAc,MAAqB;gBAClC,cAAc,MAAqB;;IAE/C;;;;;AAiBJ,MAAM,aAAa,WAA+C,SAAS,WACzE,EAAE,OAAO,MAAM,GAAG,SAClB,KACA;AACA,QAAO,oBAAC,SAAD;EAAe;EAAkC;EAAK,GAAI;EAAS,CAAA;EAC1E"}

package/dist/IconButton.d.mts

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "./IconButton-BpyOr8Ev.mjs";
+import { n as IconButtonProps, t as IconButton } from "./IconButton-Bh-JJ-0x.mjs";
 export { IconButtonProps, IconButton as default };