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

package/dist/components/DropdownButton/index.cjs

@@ -2,7 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_DropdownButton = require("../../DropdownButton-DO4NqvWR.cjs");
+const require_DropdownButton = require("../../DropdownButton-Dpiy5v-R.cjs");
 exports.DropdownButton = require_DropdownButton.DropdownButton;
 exports.default = require_DropdownButton.DropdownButton;

package/dist/components/DropdownButton/index.mjs

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

package/dist/components/DropdownMenu/index.cjs

@@ -2,7 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-D2fzpkX2.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-CeqZAxjs.cjs");
 exports.DropdownMenu = require_DropdownMenu.DropdownMenu;
 exports.default = require_DropdownMenu.DropdownMenu_default;

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

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-Bm2QqLEq.cjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-D1E1jpZu.cjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

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

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

package/dist/components/DropdownMenu/index.mjs

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

package/dist/components/FormControl/index.cjs

@@ -2,9 +2,8 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_useFormField = require("../../useFormField-DN3gpEEV.cjs");
-const require_FormControl = require("../../FormControl-DiR2e7Od.cjs");
+const require_useFormField = require("../../useFormField-BpYf3CAW.cjs");
+const require_FormControl = require("../../FormControl-DjxkL5Ft.cjs");
 exports.Container = require_FormControl.Container;
 exports.ErrorText = require_FormControl.ErrorText;
 exports.FormControl = require_FormControl.FormControl;

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

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-KkeIYuBa.cjs";
-import { r as useFormField } from "../../useFormField-Ba0CQ43u.cjs";
+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-OqBTbSwv.cjs";
+import { r as useFormField } from "../../useFormField-DLGEZ1kD.cjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

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

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-CM7wTn1P.mjs";
-import { r as useFormField } from "../../useFormField-BmtItl8y.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-vfFzrYhv.mjs";
+import { r as useFormField } from "../../useFormField-CVmt-ti2.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs

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

package/dist/components/FormField/index.cjs

@@ -2,33 +2,30 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
-const require_Stack = require("../../Stack-BHb3ZB2A.cjs");
-require("../Stack/index.cjs");
-const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
-require("../Button/index.cjs");
-const require_useFormGroup = require("../../useFormGroup-B_mFNoN9.cjs");
-const require_useFormField = require("../../useFormField-DN3gpEEV.cjs");
-const require_Menu = require("../../Menu-BpkjNO81.cjs");
-const require_DropdownMenu = require("../../DropdownMenu-D2fzpkX2.cjs");
-require("../DropdownMenu/index.cjs");
-const require_Checkbox = require("../../Checkbox-D4nv7eNs.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
+const require_Stack = require("../../Stack-BF-9YjA1.cjs");
+const require_IconButton = require("../../IconButton-DNy7g5zh.cjs");
+const require_useFormGroup = require("../../useFormGroup-DQJdKaL9.cjs");
+const require_useFormField = require("../../useFormField-BpYf3CAW.cjs");
+const require_Checkbox = require("../../Checkbox-B83WfsOZ.cjs");
+const require_Menu = require("../../Menu-BLbEcodU.cjs");
+const require_DropdownMenu = require("../../DropdownMenu-CeqZAxjs.cjs");
 const require_components_Input_index = require("../Input/index.cjs");
-require("../Menu/index.cjs");
-const require_Combobox = require("../../Combobox-B_oe33Re.cjs");
-const require_FormControl = require("../../FormControl-DiR2e7Od.cjs");
-const require_RadioGroup = require("../../RadioGroup-BjDmweRK.cjs");
-const require_SegmentedControl = require("../../SegmentedControl-CvznPXgC.cjs");
-const require_Select = require("../../Select-CVB-Q1g1.cjs");
-const require_TextArea = require("../../TextArea-MVgGGM6r.cjs");
-const require_Toggle = require("../../Toggle-CVdg5iQ0.cjs");
-const require_ListBox = require("../../ListBox-CE3mfDSB.cjs");
+const require_Combobox = require("../../Combobox-R3_NDBi3.cjs");
+const require_Select = require("../../Select-CowngLd7.cjs");
+const require_Toggle = require("../../Toggle-7o-n5vF6.cjs");
+const require_FormControl = require("../../FormControl-DjxkL5Ft.cjs");
+const require_RadioGroup = require("../../RadioGroup-D28hdlhz.cjs");
+const require_SegmentedControl = require("../../SegmentedControl-DTkFgjac.cjs");
+const require_TextArea = require("../../TextArea-p3oek3Zq.cjs");
+const require_ListBox = require("../../ListBox-B4uoo_PT.cjs");
+const require_TableBox = require("../../TableBox-D_B9atn2.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
-let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
-let lodash_fp_js = require("lodash/fp.js");
 let react_aria = require("react-aria");
+let lodash_fp_js = require("lodash/fp.js");
 let react_stately = require("react-stately");
 let react_innertext = require("react-innertext");
 react_innertext = require_chunk.__toESM(react_innertext);
@@ -368,6 +365,95 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 	});
 };
 //#endregion
+//#region components/FormField/TableBoxField.tsx
+const TableBoxField = ({ label, helperText, errorText, warningText, labelProps: labelPropsProp, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp = true, actions = [], addDropdownConfig, selectedKey: selectedKeyProp, onSelectionChange, defaultSelectedKey, selectionMode, disabled, createNewRow, children, emptyText = "No data", ...props }) => {
+	const { configField } = require_useFormGroup.useFormGroup({ configField: configFieldProp });
+	const menuActions = [...actions];
+	const [selectedKeyState, setSelectedKey] = (0, react.useState)(defaultSelectedKey);
+	const selectedKey = selectedKeyProp ?? selectedKeyState;
+	const [newRowId, setNewRowId] = (0, react.useState)(null);
+	const labelProps = {
+		size: "sm",
+		...labelPropsProp
+	};
+	const handleCreateNewRow = () => {
+		if (createNewRow) setNewRowId(createNewRow());
+	};
+	const handleAddClick = (e) => {
+		if (createNewRow) handleCreateNewRow();
+		else if (onAdd) onAdd(e);
+	};
+	if (onDelete) menuActions.unshift({
+		label: "Delete",
+		onClick: () => selectedKey && onDelete(selectedKey),
+		disabled: deleteDisabled || selectedKey == null
+	});
+	const addButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+		size: "sm",
+		onClick: handleAddClick,
+		"aria-label": "Add item to table",
+		disabled,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.PlusIcon, {})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
+		label,
+		helperText,
+		errorText,
+		warningText,
+		labelProps,
+		helperProps,
+		errorProps,
+		warningProps,
+		inputId,
+		rightActions: configField && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			menuActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+					"aria-label": "Actions",
+					size: "sm",
+					disabled,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
+				}),
+				portal: true,
+				children: menuActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+					...action,
+					disabled: disabled || action.disabled,
+					onClick: () => action.onClick(selectedKey),
+					size: "sm",
+					children: action.label
+				}, action.label))
+			}),
+			(onAdd || createNewRow) && !addDropdownConfig && addButton,
+			addDropdownConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
+				trigger: addButton,
+				portal: true,
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.MenuItem, {
+					...option,
+					onClick: () => addDropdownConfig.onSelection(option.value),
+					size: "sm",
+					children: option.label
+				}, option.value))
+			})
+		] }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableBox.TableBox, {
+			"aria-label": `${label} table`,
+			selectedKey,
+			onSelectionChange: (key) => {
+				onSelectionChange?.(key);
+				setSelectedKey(key);
+			},
+			selectionMode,
+			newRowId,
+			onCreateNewRow: createNewRow ? handleCreateNewRow : void 0,
+			emptyText,
+			disabled,
+			...props,
+			children
+		})
+	});
+};
+TableBoxField.Row = require_TableBox.TableBox.Row;
+TableBoxField.Cell = require_TableBox.TableBox.Cell;
+//#endregion
 exports.CheckboxField = CheckboxField;
 exports.CheckboxGroupField = CheckboxGroupField;
 exports.ComboboxField = ComboboxField;
@@ -376,6 +462,7 @@ exports.ListBoxField = ListBoxField;
 exports.RadioGroupField = RadioGroupField;
 exports.SegmentedControlField = SegmentedControlField;
 exports.SelectField = SelectField;
+exports.TableBoxField = TableBoxField;
 exports.TextAreaField = TextAreaField;
 exports.TextField = TextField;
 exports.ToggleField = ToggleField;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useFormGroup","FormLabel","FormControl","HStack","Spacing","FormInputContainer","HelperText","WarningText","ErrorText","Input","TextArea","Select","RadioGroup","Checkbox","Toggle","SegmentedControl","Combobox","FormControlContext","Children","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","MenuItem","ListBox"],"sources":["../../../components/FormField/FormField.tsx","../../../components/FormField/inputFields.tsx","../../../components/FormField/CheckboxGroupField.tsx","../../../components/FormField/ListBoxField.tsx"],"sourcesContent":["import { Spacing } from '@persona/design-tokens';\nimport { type ComponentPropsWithRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\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 * > **Please do not use in production! This component is subject to API and style changes.**\n *\n * Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\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/fp';\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(\n    { label, helperText, errorText, warningText, inputId, id, configField, ...props },\n    ref,\n  ) {\n    return (\n      <FormField\n        inputId={inputId ?? id}\n        label={label}\n        labelProps={{ size: props.size }}\n        helperText={helperText}\n        warningText={warningText}\n        errorText={errorText}\n        configField={configField}\n      >\n        <TextArea {...props} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n  id,\n  label,\n  helperText,\n  errorText,\n  warningText,\n  children,\n  configField,\n  labelProps,\n  ...props\n}: SelectFieldProps) => {\n  const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n  return (\n    <FormField\n      label={label}\n      labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Select {...props} 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>(function ToggleField(\n  { label, helperText, errorText, warningText, configField, ...props },\n  ref,\n) {\n  return (\n    <FormField\n      label={label}\n      labelProps={{ size: props.size }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Toggle {...props} ref={ref} />\n    </FormField>\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  label,\n  labelProps,\n  helperText,\n  errorText,\n  warningText,\n  configField,\n  ...props\n}: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      labelProps={labelProps}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Combobox {...props} />\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 { MoreIcon, PlusIcon } from '@persona/icons';\nimport { type ReactNode, useState } from 'react';\n\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 { MenuItem, 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}\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  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'>\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                  <MenuItem\n                    key={action.label}\n                    {...action}\n                    onClick={() => action.onClick(selectedKeys)}\n                    size={effectiveSize}\n                  >\n                    {action.label}\n                  </MenuItem>\n                ))}\n              </DropdownMenu>\n            )}\n            {onAdd && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} align='start' portal>\n                {addDropdownConfig.options.map((option) => (\n                  <MenuItem\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size={effectiveSize}\n                  >\n                    {option.label}\n                  </MenuItem>\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"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["useFormGroup","FormLabel","FormControl","HStack","Spacing","FormInputContainer","HelperText","WarningText","ErrorText","Input","TextArea","Select","RadioGroup","Checkbox","Toggle","SegmentedControl","Combobox","FormControlContext","Children","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","MenuItem","ListBox","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","MenuItem","TableBox"],"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 * > **Please do not use in production! This component is subject to API and style changes.**\n *\n * Helper components with preset slots for label, input, and helper texts.\n * Fully composed components with different form input types are available.\n * This is the recommended way to implement form elements.\n * You can use `<FormControl>` if you require more flexibility.\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/fp';\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(\n    { label, helperText, errorText, warningText, inputId, id, configField, ...props },\n    ref,\n  ) {\n    return (\n      <FormField\n        inputId={inputId ?? id}\n        label={label}\n        labelProps={{ size: props.size }}\n        helperText={helperText}\n        warningText={warningText}\n        errorText={errorText}\n        configField={configField}\n      >\n        <TextArea {...props} ref={ref} />\n      </FormField>\n    );\n  },\n);\n\nexport interface SelectFieldProps extends ImplementsFormField, SelectProps {}\n\nexport const SelectField = ({\n  id,\n  label,\n  helperText,\n  errorText,\n  warningText,\n  children,\n  configField,\n  labelProps,\n  ...props\n}: SelectFieldProps) => {\n  const linkedId = useMemo(() => id ?? uniqueId('pds-form-field-input-fields-select__'), [id]);\n\n  return (\n    <FormField\n      label={label}\n      labelProps={{ htmlFor: linkedId, size: props.size, ...labelProps }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Select {...props} 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>(function ToggleField(\n  { label, helperText, errorText, warningText, configField, ...props },\n  ref,\n) {\n  return (\n    <FormField\n      label={label}\n      labelProps={{ size: props.size }}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Toggle {...props} ref={ref} />\n    </FormField>\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  label,\n  labelProps,\n  helperText,\n  errorText,\n  warningText,\n  configField,\n  ...props\n}: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => {\n  return (\n    <FormField\n      label={label}\n      labelProps={labelProps}\n      helperText={helperText}\n      warningText={warningText}\n      errorText={errorText}\n      configField={configField}\n    >\n      <Combobox {...props} />\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 { MenuItem, 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}\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  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'>\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                  <MenuItem\n                    key={action.label}\n                    {...action}\n                    onClick={() => action.onClick(selectedKeys)}\n                    size={effectiveSize}\n                  >\n                    {action.label}\n                  </MenuItem>\n                ))}\n              </DropdownMenu>\n            )}\n            {onAdd && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} align='start' portal>\n                {addDropdownConfig.options.map((option) => (\n                  <MenuItem\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size={effectiveSize}\n                  >\n                    {option.label}\n                  </MenuItem>\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 { 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 { MenuItem, 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\ninterface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {\n  label: string;\n  onClick: (selectedKey: TableBoxProps['selectedKey']) => void;\n}\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?: TableBoxFieldAction[];\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: TableBoxFieldAction[] = [...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\n  const addButton = (\n    <IconButton\n      size='sm'\n      onClick={handleAddClick}\n      aria-label='Add item to table'\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            {menuActions.length > 0 && (\n              <DropdownMenu\n                trigger={\n                  <IconButton aria-label='Actions' size='sm' disabled={disabled}>\n                    <MoreIcon />\n                  </IconButton>\n                }\n                portal\n              >\n                {menuActions.map((action) => (\n                  <MenuItem\n                    key={action.label}\n                    {...action}\n                    disabled={disabled || action.disabled}\n                    onClick={() => action.onClick(selectedKey)}\n                    size='sm'\n                  >\n                    {action.label}\n                  </MenuItem>\n                ))}\n              </DropdownMenu>\n            )}\n            {(onAdd || createNewRow) && !addDropdownConfig && addButton}\n            {addDropdownConfig && (\n              <DropdownMenu trigger={addButton} portal>\n                {addDropdownConfig.options.map((option) => (\n                  <MenuItem\n                    key={option.value}\n                    {...option}\n                    onClick={() => addDropdownConfig.onSelection(option.value)}\n                    size='sm'\n                  >\n                    {option.label}\n                  </MenuItem>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,MAAa,aAAA,GAAA,MAAA,YAAuD,SAAS,UAC3E,EACE,OACA,UACA,YACA,aACA,WACA,YACA,aACA,cACA,YACA,aAAa,iBACb,uBACA,cACA,GAAG,SAEL,KACA;CACA,MAAM,EAAE,aAAa,yBAAyBA,qBAAAA,cAAc;CAC5D,MAAM,cAAc,mBAAmB;CAEvC,MAAM,eAAe,QACnB,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,WAAD;EAAW,SAAS,eAAe,aAAa,aAAa,KAAA;EAAW,GAAI;YACzE;EACS,CAAA,GACV;AAEJ,QACE,iBAAA,GAAA,kBAAA,MAACC,oBAAAA,aAAD;EACE,UAAU,CAAC,CAAC;EACZ,YAAY,CAAC,CAAC;EACT;EACQ;EACb,iBAAiB,CAAC,CAAC;EACI;EACvB,GAAI;YAPN;GASG,eACC,iBAAA,GAAA,kBAAA,MAACC,cAAAA,QAAD;IAAQ,SAAQ;IAAgB,OAAM;cAAtC,CACG,cACD,iBAAA,GAAA,kBAAA,KAACA,cAAAA,QAAD;KAAQ,SAASC,uBAAAA,QAAQ;eAAK;KAAsB,CAAA,CAC7C;QAET;GAEF,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,oBAAD,EAAqB,UAA8B,CAAA;GAClD,CAAC,eAAe,cAAc,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,YAAD;IAAY,GAAI;cAAc;IAAwB,CAAA;GACpF,CAAC,eAAe,eAAe,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAAa,GAAI;cAAe;IAA0B,CAAA;GACzF,CAAC,eAAe,aAAa,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,WAAD;IAAW,GAAI;cAAa;IAAsB,CAAA;GACpE;;EAEhB;;;;;;;AChGF,MAAa,0BACX,UAIG;CACH,MAAM,EACJ,OACA,SACA,YACA,WACA,aACA,YACA,aACA,cACA,YACA,aACA,uBACA,cACA,GAAG,eACD;AAEJ,QAAO;EACL,gBAAgB;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD;EACD;;AAKH,MAAa,aAAA,GAAA,MAAA,YACX,SAAS,UAAU,OAAO,KAAK;CAC7B,MAAM,EAAE,gBAAgB,eAAe,uBAAuB,MAAM;CACpE,MAAM,EAAE,IAAI,GAAG,SAAS;AAExB,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACE,GAAI;EACJ,YAAY;GAAE,MAAM,MAAM;GAAM,GAAG,eAAe;GAAY;EAC9D,SAAS,eAAe,WAAW;YAEnC,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,SAAD;GAAO,GAAI;GAAW;GAAO,CAAA;EACnB,CAAA;EAGjB;AAID,MAAa,iBAAA,GAAA,MAAA,YACX,SAAS,cACP,EAAE,OAAO,YAAY,WAAW,aAAa,SAAS,IAAI,aAAa,GAAG,SAC1E,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACE,SAAS,WAAW;EACb;EACP,YAAY,EAAE,MAAM,MAAM,MAAM;EACpB;EACC;EACF;EACE;YAEb,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD;GAAU,GAAI;GAAY;GAAO,CAAA;EACvB,CAAA;EAGjB;AAID,MAAa,eAAe,EAC1B,IACA,OACA,YACA,WACA,aACA,UACA,aACA,YACA,GAAG,YACmB;CACtB,MAAM,YAAA,GAAA,MAAA,eAAyB,OAAA,GAAA,aAAA,UAAe,uCAAuC,EAAE,CAAC,GAAG,CAAC;AAE5F,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACP,YAAY;GAAE,SAAS;GAAU,MAAM,MAAM;GAAM,GAAG;GAAY;EACtD;EACC;EACF;EACE;YAEb,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;GAAQ,GAAI;GAAO,IAAI;GACpB;GACM,CAAA;EACC,CAAA;;AAOhB,MAAa,mBAAmB,EAC9B,OACA,YACA,WACA,aACA,UACA,GAAG,YACuB;AAC1B,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACC;EACF;YAEX,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpC,CAAA;;AAQhB,MAAa,iBAAiB,EAC5B,OACA,YACA,WACA,aACA,eACA,aACA,YACA,GAAG,YACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACC;EACF;EACE;EACD;YAEZ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;GAAU,OAAO;GAAe,GAAI;GAAS,CAAA;EACnC,CAAA;;AAMhB,MAAa,eAAA,GAAA,MAAA,YAA2D,SAAS,YAC/E,EAAE,OAAO,YAAY,WAAW,aAAa,aAAa,GAAG,SAC7D,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACP,YAAY,EAAE,MAAM,MAAM,MAAM;EACpB;EACC;EACF;EACE;YAEb,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;GAAQ,GAAI;GAAY;GAAO,CAAA;EACrB,CAAA;EAEd;AAOF,MAAa,yBAAA,GAAA,MAAA,YACX,SAAS,sBACP,EAAE,OAAO,YAAY,WAAW,aAAa,aAAa,UAAU,YAAY,GAAG,SACnF,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACC;EACF;EACE;EACD;YAEZ,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;GAAkB,WAAA;GAAU,GAAI;GAAY;GACzC;GACgB,CAAA;EACT,CAAA;EAGjB;AAOD,MAAa,iBAAiB,EAC5B,OACA,YACA,YACA,WACA,aACA,aACA,GAAG,YACiE;AACpE,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACA;EACC;EACF;EACE;YAEb,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD,EAAU,GAAI,OAAS,CAAA;EACb,CAAA;;;;AC1PhB,MAAM,wBAAA,GAAA,MAAA,eAAyD,KAAK;;;AAIpE,MAAM,qBAAqB,EAAE,eAAwC;CACnE,MAAM,iBAAA,GAAA,MAAA,YAA2BC,qBAAAA,mBAAmB;AACpD,QACE,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,mBAAmB,UAApB;EAA6B,OAAO;GAAE,GAAG;GAAe,SAAS,KAAA;GAAW;EACzE;EAC2B,CAAA;;AAQlC,MAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,aAAa;CACrB,MAAM,gBAAgB,SAAS;CAE/B,MAAM,SAAA,GAAA,MAAA,YAAmB,qBAAqB;CAC9C,MAAM,OAAA,GAAA,MAAA,SAAc;CACpB,MAAM,EAAE,gBAAA,GAAA,WAAA,sBAEN;EACE,GAAG;EACH,UAAU,KAAA;EACV,YAAY,cAAc;EAC1B,YAAY,cAAc;EAC1B,YAAY,cAAc;EAC1B,iBAAiB,cAAc;EAC/B,OAAO,OAAO,SAAS,MAAM,MAAM;EACnC,eAAA,GAAA,gBAAA,SAAwB,cAAc,MAAM;EAC7C,EACD,OACA,IACD;AAED,SAAA,GAAA,MAAA,cACE,WAAA,GAAA,WAAA,YAEW,YAAY;EACrB,UAAU,cAAc;EACxB,UAAU,MAAM,cAAc,cAAc;EAC5C,SAAS,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;EACnD;EACD,CAA2C,CAC7C;;AAgBH,MAAM,sBAAsB,EAC1B,UACA,MACA,UACA,UACA,UACA,UACA,GAAG,YAC0B;CAC7B,MAAM,iBAAiB;EACrB,GAAG;EACH,aAAa,MAAM;EACnB,cAAc,MAAM;EACpB;EACA;EACA,YAAY;EACZ,YAAY;EACZ,YAAY;EACb;CACD,MAAM,SAAA,GAAA,cAAA,uBAA8B,eAAe;CACnD,MAAM,EAAE,YAAY,YAAY,kBAAkB,uBAAA,GAAA,WAAA,kBAChD,gBACA,MACD;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACc;EACZ,aAAa;EACb,YAAY;EACF;EACV,GAAI;EACJ,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,qBAAqB,UAAtB;GAA+B,OAAO;aACnCC,MAAAA,SAAS,IAAI,WAAW,aAEvB,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UAAoB,UAA6B,CAAA,CACjD;GAC4B,CAAA,EACd,CAAA;EACV,CAAA;;;;AC1GhB,MAAM,gBAAkC,EACtC,OACA,YACA,WACA,aACA,YACA,aACA,YACA,cACA,SACA,OACA,UACA,gBACA,aAAa,iBACb,OAAO,MACP,UAAU,EAAE,EACZ,mBACA,cAAc,kBACd,mBACA,qBACA,GAAG,YACuB;CAC1B,MAAM,EAAE,gBAAgBC,qBAAAA,aAAa,EAAE,aAAa,iBAAiB,CAAC;CACtE,MAAM,cAAoC,CAAC,GAAG,QAAQ;CACtD,MAAM,CAAC,mBAAmB,oBAAA,GAAA,MAAA,UAA4B,oBAAoB;CAC1E,MAAM,eAAe,oBAAoB;CACzC,MAAM,gBAAgB,cAAc,OAAO;AAE3C,KAAI,SACF,aAAY,QAAQ;EAClB,OAAO;EACP,eAAe,SAAS,aAAa;EACrC,UACE,kBACA,gBAAgB,QACf,OAAO,iBAAiB,YAAY,CAAC,GAAG,aAAa,CAAC,WAAW;EACrE,CAAC;CAGJ,MAAM,YACJ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EAAY,MAAK;EAAK,SAAS;EAAO,cAAW;YAC/C,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD,EAAY,CAAA;EACD,CAAA;AAGf,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACD;EACE;EACD;EACC;EACD;EACE;EACL;EACI;EACb,cACE,eACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG,YAAY,SAAS,KACpB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,sBAAD;IACE,SACE,iBAAA,GAAA,kBAAA,KAACF,mBAAAA,YAAD;KAAY,cAAW;KAAU,MAAK;eACpC,iBAAA,GAAA,kBAAA,KAACG,eAAAA,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,QAAA;cAEC,YAAY,KAAK,WAChB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,UAAD;KAEE,GAAI;KACJ,eAAe,OAAO,QAAQ,aAAa;KAC3C,MAAM;eAEL,OAAO;KACC,EANJ,OAAO,MAMH,CACX;IACW,CAAA;GAEhB,SAAS,CAAC,qBAAqB;GAC/B,qBACC,iBAAA,GAAA,kBAAA,KAACF,qBAAAA,sBAAD;IAAc,SAAS;IAAW,OAAM;IAAQ,QAAA;cAC7C,kBAAkB,QAAQ,KAAK,WAC9B,iBAAA,GAAA,kBAAA,KAACE,aAAAA,UAAD;KAEE,GAAI;KACJ,eAAe,kBAAkB,YAAY,OAAO,MAAM;KAC1D,MAAM;eAEL,OAAO;KACC,EANJ,OAAO,MAMH,CACX;IACW,CAAA;GAEhB,EAAA,CAAA;YAIP,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;GACE,IAAI;GACJ,WAAW;GACX,MAAM;GACU;GAEF;GACd,oBAAoB,SAAS;AAC3B,wBAAoB,KAAK;AACzB,oBAAgB,KAAK;;GAEvB,GAAI;GACJ,CAAA;EACQ,CAAA;;;;ACpGhB,MAAM,iBAA4C,EAChD,OACA,YACA,WACA,aACA,YAAY,gBACZ,aACA,YACA,cACA,SACA,OACA,UACA,gBACA,aAAa,kBAAkB,MAC/B,UAAU,EAAE,EACZ,mBACA,aAAa,iBACb,mBACA,oBACA,eACA,UACA,cACA,UACA,YAAY,WACZ,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgBC,qBAAAA,aAAa,EAAE,aAAa,iBAAiB,CAAC;CACtE,MAAM,cAAqC,CAAC,GAAG,QAAQ;CACvD,MAAM,CAAC,kBAAkB,mBAAA,GAAA,MAAA,UAA2B,mBAAmB;CACvE,MAAM,cAAc,mBAAmB;CACvC,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAuC,KAAK;CAC7D,MAAM,aAA6B;EAAE,MAAM;EAAM,GAAG;EAAgB;CAEpE,MAAM,2BAA2B;AAC/B,MAAI,aACF,aAAY,cAAc,CAAC;;CAK/B,MAAM,kBAAkB,MAAqC;AAC3D,MAAI,aACF,qBAAoB;WACX,MACT,OAAM,EAAE;;AAIZ,KAAI,SACF,aAAY,QAAQ;EAClB,OAAO;EACP,eAAe,eAAe,SAAS,YAAY;EACnD,UAAU,kBAAkB,eAAe;EAC5C,CAAC;CAGJ,MAAM,YACJ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,MAAK;EACL,SAAS;EACT,cAAW;EACD;YAEV,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD,EAAY,CAAA;EACD,CAAA;AAGf,QACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACS;EACK;EACD;EACE;EACD;EACC;EACD;EACE;EACL;EACT,cACE,eACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;GACG,YAAY,SAAS,KACpB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,sBAAD;IACE,SACE,iBAAA,GAAA,kBAAA,KAACF,mBAAAA,YAAD;KAAY,cAAW;KAAU,MAAK;KAAe;eACnD,iBAAA,GAAA,kBAAA,KAACG,eAAAA,UAAD,EAAY,CAAA;KACD,CAAA;IAEf,QAAA;cAEC,YAAY,KAAK,WAChB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,UAAD;KAEE,GAAI;KACJ,UAAU,YAAY,OAAO;KAC7B,eAAe,OAAO,QAAQ,YAAY;KAC1C,MAAK;eAEJ,OAAO;KACC,EAPJ,OAAO,MAOH,CACX;IACW,CAAA;IAEf,SAAS,iBAAiB,CAAC,qBAAqB;GACjD,qBACC,iBAAA,GAAA,kBAAA,KAACF,qBAAAA,sBAAD;IAAc,SAAS;IAAW,QAAA;cAC/B,kBAAkB,QAAQ,KAAK,WAC9B,iBAAA,GAAA,kBAAA,KAACE,aAAAA,UAAD;KAEE,GAAI;KACJ,eAAe,kBAAkB,YAAY,OAAO,MAAM;KAC1D,MAAK;eAEJ,OAAO;KACC,EANJ,OAAO,MAMH,CACX;IACW,CAAA;GAEhB,EAAA,CAAA;YAIP,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;GACE,cAAY,GAAG,MAAM;GAER;GACb,oBAAoB,QAAQ;AAC1B,wBAAoB,IAAI;AACxB,mBAAe,IAAI;;GAEN;GACL;GACV,gBAAgB,eAAe,qBAAqB,KAAA;GACzC;GACD;GACV,GAAI;GAEH;GACQ,CAAA;EACD,CAAA;;AAKhB,cAAc,MAAMA,iBAAAA,SAAS;AAC7B,cAAc,OAAOA,iBAAAA,SAAS"}

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

@@ -1,5 +1,6 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-19ownwjH.cjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-Cqwi_PyR.cjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.cjs";
 import CheckboxGroupField from "../../CheckboxGroupField.cjs";
 import ListBoxField from "../../ListBoxField.cjs";
-export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };
+import TableBoxField from "../../TableBoxField.cjs";
+export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

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

@@ -1,5 +1,6 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-CdMru4s5.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-24UPuoL6.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";
-export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };
+import TableBoxField from "../../TableBoxField.mjs";
+export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TableBoxField, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

package/dist/components/FormField/index.mjs

@@ -1,29 +1,26 @@
-import { t as HStack } from "../../Stack-hwgS2FU1.mjs";
-import "../Stack/index.mjs";
-import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
-import "../Button/index.mjs";
-import { n as useFormGroup } from "../../useFormGroup-BMukAMAd.mjs";
-import { t as FormControlContext } from "../../useFormField-eftOPiXj.mjs";
-import { s as MenuItem } from "../../Menu-DNRHo2i_.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-BTk--LWo.mjs";
-import "../DropdownMenu/index.mjs";
-import { t as Checkbox } from "../../Checkbox-C5bGcb-r.mjs";
+import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
+import { t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
+import { n as useFormGroup } from "../../useFormGroup-z0epBxXn.mjs";
+import { t as FormControlContext } from "../../useFormField-D0RTrPld.mjs";
+import { t as Checkbox } from "../../Checkbox-UWdk4pqb.mjs";
+import { s as MenuItem } from "../../Menu-BbSyWxFD.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-cN_AnKAT.mjs";
 import Input_default from "../Input/index.mjs";
-import "../Menu/index.mjs";
-import { t as Combobox } from "../../Combobox-B_-swcix.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "../../FormControl-BXHqI_2D.mjs";
-import { t as RadioGroup } from "../../RadioGroup-B8htTzsS.mjs";
-import { t as SegmentedControl } from "../../SegmentedControl-DnwNjYre.mjs";
-import { n as Select } from "../../Select-Cl3AOq0-.mjs";
-import { t as TextAreaWithStyle } from "../../TextArea-B1kitxCl.mjs";
-import { t as Toggle } from "../../Toggle-8GNRxyvE.mjs";
-import { t as ListBox } from "../../ListBox-Z1y0LG1H.mjs";
+import { t as Combobox } from "../../Combobox-I44W5oX0.mjs";
+import { n as Select } from "../../Select-Fg2z5J-p.mjs";
+import { t as Toggle } from "../../Toggle-DOo0cLmI.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText } from "../../FormControl-fK4HA_yF.mjs";
+import { t as RadioGroup } from "../../RadioGroup-BDHhFlmy.mjs";
+import { t as SegmentedControl } from "../../SegmentedControl-pRkMcMXe.mjs";
+import { t as TextAreaWithStyle } from "../../TextArea-CJJlw3rV.mjs";
+import { t as ListBox } from "../../ListBox-B7sbubm5.mjs";
+import { t as TableBox } from "../../TableBox-CPCWzwSl.mjs";
 import { Spacing } from "@persona/design-tokens";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { MoreIcon, PlusIcon } from "@persona/icons";
-import { uniqueId } from "lodash/fp.js";
 import { mergeProps, useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
+import { uniqueId } from "lodash/fp.js";
 import { useCheckboxGroupState } from "react-stately";
 import innerText from "react-innertext";
 //#region components/FormField/FormField.tsx
@@ -319,7 +316,7 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 		warningProps,
 		inputId,
 		configField,
-		rightActions: configField && /* @__PURE__ */ jsxs(Fragment, { children: [
+		rightActions: configField && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			menuActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
 				trigger: /* @__PURE__ */ jsx(IconButton, {
 					"aria-label": "Actions",
@@ -362,6 +359,95 @@ const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, h
 	});
 };
 //#endregion
-export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };
+//#region components/FormField/TableBoxField.tsx
+const TableBoxField = ({ label, helperText, errorText, warningText, labelProps: labelPropsProp, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp = true, actions = [], addDropdownConfig, selectedKey: selectedKeyProp, onSelectionChange, defaultSelectedKey, selectionMode, disabled, createNewRow, children, emptyText = "No data", ...props }) => {
+	const { configField } = useFormGroup({ configField: configFieldProp });
+	const menuActions = [...actions];
+	const [selectedKeyState, setSelectedKey] = useState(defaultSelectedKey);
+	const selectedKey = selectedKeyProp ?? selectedKeyState;
+	const [newRowId, setNewRowId] = useState(null);
+	const labelProps = {
+		size: "sm",
+		...labelPropsProp
+	};
+	const handleCreateNewRow = () => {
+		if (createNewRow) setNewRowId(createNewRow());
+	};
+	const handleAddClick = (e) => {
+		if (createNewRow) handleCreateNewRow();
+		else if (onAdd) onAdd(e);
+	};
+	if (onDelete) menuActions.unshift({
+		label: "Delete",
+		onClick: () => selectedKey && onDelete(selectedKey),
+		disabled: deleteDisabled || selectedKey == null
+	});
+	const addButton = /* @__PURE__ */ jsx(IconButton, {
+		size: "sm",
+		onClick: handleAddClick,
+		"aria-label": "Add item to table",
+		disabled,
+		children: /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		helperText,
+		errorText,
+		warningText,
+		labelProps,
+		helperProps,
+		errorProps,
+		warningProps,
+		inputId,
+		rightActions: configField && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			menuActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenu_default, {
+				trigger: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Actions",
+					size: "sm",
+					disabled,
+					children: /* @__PURE__ */ jsx(MoreIcon, {})
+				}),
+				portal: true,
+				children: menuActions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
+					...action,
+					disabled: disabled || action.disabled,
+					onClick: () => action.onClick(selectedKey),
+					size: "sm",
+					children: action.label
+				}, action.label))
+			}),
+			(onAdd || createNewRow) && !addDropdownConfig && addButton,
+			addDropdownConfig && /* @__PURE__ */ jsx(DropdownMenu_default, {
+				trigger: addButton,
+				portal: true,
+				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ jsx(MenuItem, {
+					...option,
+					onClick: () => addDropdownConfig.onSelection(option.value),
+					size: "sm",
+					children: option.label
+				}, option.value))
+			})
+		] }),
+		children: /* @__PURE__ */ jsx(TableBox, {
+			"aria-label": `${label} table`,
+			selectedKey,
+			onSelectionChange: (key) => {
+				onSelectionChange?.(key);
+				setSelectedKey(key);
+			},
+			selectionMode,
+			newRowId,
+			onCreateNewRow: createNewRow ? handleCreateNewRow : void 0,
+			emptyText,
+			disabled,
+			...props,
+			children
+		})
+	});
+};
+TableBoxField.Row = TableBox.Row;
+TableBoxField.Cell = TableBox.Cell;
+//#endregion
+export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TableBoxField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };
 
 //# sourceMappingURL=index.mjs.map