@persona/design-system 0.1.8 → 0.2.0

package/dist/FormField-D3XhxTMg.cjs

@@ -1,550 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_Stack = require("./Stack-UeifHn3c.cjs");
-const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
-const require_DropdownMenu = require("./DropdownMenu-DnlQqTjs.cjs");
-const require_useFormGroup = require("./useFormGroup-Bmnzgq0S.cjs");
-const require_useFormField = require("./useFormField-BZlArnsI.cjs");
-const require_components_Input_index = require("./components/Input/index.cjs");
-const require_Checkbox = require("./Checkbox-CmCujC1W.cjs");
-const require_Combobox = require("./Combobox-COXvmxlM.cjs");
-const require_Select = require("./Select-BurtT6bN.cjs");
-const require_Toggle = require("./Toggle-Ce-rF8Xp.cjs");
-const require_FormControl = require("./FormControl-MkBXuUF6.cjs");
-const require_ListBox = require("./ListBox-BP1eaG7L.cjs");
-const require_RadioGroup = require("./RadioGroup-CriF2InQ.cjs");
-const require_SegmentedControl = require("./SegmentedControl-C2XZF0ys.cjs");
-const require_TextArea = require("./TextArea-BNiipQDb.cjs");
-const require_TableBox = require("./TableBox-CiuXCXyv.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-let lodash_fp_js = require("lodash/fp.js");
-let react_aria = require("react-aria");
-let react_stately = require("react-stately");
-let react_innertext = require("react-innertext");
-react_innertext = require_chunk.__toESM(react_innertext);
-//#region components/FormField/FormField.tsx
-/**
-* > **Please do not use in production! This component is subject to API and style changes.**
-*
-* 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.
-*
-* ## Usage
-*
-* ```tsx
-* import FormField from 'design-system/components/FormField';
-* ```
-*/
-const FormField = (0, react.forwardRef)(function FormField({ label, children, helperText, warningText, errorText, labelProps, helperProps, warningProps, errorProps, configField: configFieldProp, configFieldInputWidth, rightActions, ...props }, ref) {
-	const { configField: configFieldFormGroup } = require_useFormGroup.useFormGroup();
-	const configField = configFieldProp ?? configFieldFormGroup;
-	const labelElement = label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.FormLabel, {
-		tooltip: configField && helperText ? helperText : void 0,
-		...labelProps,
-		children: label
-	}) : null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.FormControl, {
-		hasError: !!errorText,
-		hasWarning: !!warningText,
-		ref,
-		configField,
-		hasRightActions: !!rightActions,
-		configFieldInputWidth,
-		...props,
-		children: [
-			rightActions ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.HStack, {
-				justify: "space-between",
-				align: "center",
-				children: [labelElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.HStack, {
-					spacing: _persona_design_tokens.Spacing[1],
-					children: rightActions
-				})]
-			}) : labelElement,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.FormInputContainer, { children }),
-			!configField && helperText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.HelperText, {
-				...helperProps,
-				children: helperText
-			}),
-			!configField && warningText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.WarningText, {
-				...warningProps,
-				children: warningText
-			}),
-			!configField && errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.ErrorText, {
-				...errorProps,
-				children: errorText
-			})
-		]
-	});
-});
-//#endregion
-//#region components/FormField/inputFields.tsx
-/**
-* Helper to split out props that are sent to the FormField component from props sent
-* to the underlying input component.
-*/
-const splitOutFormFieldProps = (props) => {
-	const { label, inputId, helperText, errorText, warningText, labelProps, helperProps, warningProps, errorProps, configField, configFieldInputWidth, rightActions, ...inputProps } = props;
-	return {
-		formFieldProps: {
-			label,
-			inputId,
-			helperText,
-			errorText,
-			warningText,
-			labelProps,
-			helperProps,
-			warningProps,
-			errorProps,
-			configField,
-			configFieldInputWidth,
-			rightActions
-		},
-		inputProps
-	};
-};
-const TextField = (0, react.forwardRef)(function TextField(props, ref) {
-	const { formFieldProps, inputProps } = splitOutFormFieldProps(props);
-	const { id, ...rest } = inputProps;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		...formFieldProps,
-		labelProps: {
-			size: props.size,
-			...formFieldProps.labelProps
-		},
-		inputId: formFieldProps.inputId ?? id,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.default, {
-			...rest,
-			ref
-		})
-	});
-});
-const TextAreaField = (0, react.forwardRef)(function TextAreaField({ label, helperText, errorText, warningText, inputId, id, configField, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		inputId: inputId ?? id,
-		label,
-		labelProps: { size: props.size },
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextArea.TextAreaWithStyle, {
-			...props,
-			ref
-		})
-	});
-});
-const SelectField = ({ id, label, helperText, errorText, warningText, children, configField, labelProps, ...props }) => {
-	const linkedId = (0, react.useMemo)(() => id ?? (0, lodash_fp_js.uniqueId)("pds-form-field-input-fields-select__"), [id]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		labelProps: {
-			htmlFor: linkedId,
-			size: props.size,
-			...labelProps
-		},
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.Select, {
-			...props,
-			id: linkedId,
-			children
-		})
-	});
-};
-const RadioGroupField = ({ label, helperText, errorText, warningText, children, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		helperText,
-		warningText,
-		errorText,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioGroup.RadioGroup, {
-			...props,
-			children
-		})
-	});
-};
-const CheckboxField = ({ label, helperText, errorText, warningText, checkboxLabel, configField, labelProps, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		labelProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
-			label: checkboxLabel,
-			...props
-		})
-	});
-};
-const ToggleField = (0, react.forwardRef)(function ToggleField({ label, helperText, errorText, warningText, configField, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		labelProps: { size: props.size },
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.Toggle, {
-			...props,
-			ref
-		})
-	});
-});
-const SegmentedControlField = (0, react.forwardRef)(function SegmentedControlField({ label, helperText, errorText, warningText, configField, children, labelProps, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		labelProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
-			fullWidth: true,
-			...props,
-			ref,
-			children
-		})
-	});
-});
-const ComboboxField = ({ label, labelProps, helperText, errorText, warningText, configField, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		label,
-		labelProps,
-		helperText,
-		warningText,
-		errorText,
-		configField,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox, { ...props })
-	});
-};
-//#endregion
-//#region components/FormField/CheckboxGroupField.tsx
-const CheckboxGroupContext = (0, react.createContext)(null);
-/** Preserves the parent FormControl context (disabled, hasError, etc.) but clears
-*  inputId so each Checkbox inside the group generates its own unique id. */
-const ClearGroupInputId = ({ children }) => {
-	const parentContext = (0, react.useContext)(require_useFormField.FormControlContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormField.FormControlContext.Provider, {
-		value: {
-			...parentContext,
-			inputId: void 0
-		},
-		children
-	});
-};
-const CheckboxGroupItem = (props) => {
-	const { children } = props;
-	const checkboxProps = children.props;
-	const state = (0, react.useContext)(CheckboxGroupContext);
-	const ref = (0, react.useRef)();
-	const { inputProps } = (0, react_aria.useCheckboxGroupItem)({
-		...checkboxProps,
-		onChange: void 0,
-		isDisabled: checkboxProps.disabled,
-		isReadOnly: checkboxProps.readOnly,
-		isRequired: checkboxProps.required,
-		isIndeterminate: checkboxProps.indeterminate,
-		value: String(children.props.value),
-		"aria-label": (0, react_innertext.default)(checkboxProps.label)
-	}, state, ref);
-	return (0, react.cloneElement)(children, (0, react_aria.mergeProps)(inputProps, {
-		onChange: checkboxProps.onChange,
-		disabled: state.isDisabled || checkboxProps.disabled,
-		checked: state.isSelected(String(inputProps.value)),
-		ref
-	}));
-};
-const CheckboxGroupField = ({ children, name, onChange, disabled, readOnly, required, ...props }) => {
-	const reactAriaProps = {
-		...props,
-		description: props.helperText,
-		errorMessage: props.errorText,
-		onChange,
-		name,
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isRequired: required
-	};
-	const state = (0, react_stately.useCheckboxGroupState)(reactAriaProps);
-	const { groupProps, labelProps, descriptionProps, errorMessageProps } = (0, react_aria.useCheckboxGroup)(reactAriaProps, state);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-		labelProps,
-		helperProps: descriptionProps,
-		errorProps: errorMessageProps,
-		disabled,
-		...groupProps,
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearGroupInputId, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupContext.Provider, {
-			value: state,
-			children: react.Children.map(children, (checkbox) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGroupItem, { children: checkbox }))
-		}) })
-	});
-};
-//#endregion
-//#region components/FormField/ListBoxField.tsx
-const ListBoxField = ({ label, helperText, errorText, warningText, labelProps, helperProps, errorProps, warningProps, inputId, onAdd, onDelete, deleteDisabled, configField: configFieldProp, size = "md", actions = [], addDropdownConfig, selectedKeys: selectedKeysProp, onSelectionChange, defaultSelectedKeys, ...props }) => {
-	const { configField } = require_useFormGroup.useFormGroup({ configField: configFieldProp });
-	const menuActions = [...actions];
-	const [selectedKeysState, setSelectedKeys] = (0, react.useState)(defaultSelectedKeys);
-	const selectedKeys = selectedKeysProp ?? selectedKeysState;
-	const effectiveSize = configField ? "sm" : size;
-	if (onDelete) menuActions.unshift({
-		label: "Delete",
-		onClick: () => onDelete(selectedKeys),
-		disabled: deleteDisabled || selectedKeys == null || typeof selectedKeys === "object" && [...selectedKeys].length === 0
-	});
-	const addButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-		size: "sm",
-		onClick: onAdd,
-		"aria-label": "Add item to list",
-		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,
-		configField,
-		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",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.MoreIcon, {})
-				}),
-				portal: true,
-				children: menuActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-					...action,
-					onClick: () => action.onClick(selectedKeys),
-					size: effectiveSize,
-					children: action.label
-				}, action.label))
-			}),
-			onAdd && !addDropdownConfig && addButton,
-			addDropdownConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-				trigger: addButton,
-				align: "start",
-				portal: true,
-				children: addDropdownConfig.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-					...option,
-					onClick: () => addDropdownConfig.onSelection(option.value),
-					size: effectiveSize,
-					children: option.label
-				}, option.value))
-			})
-		] }),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ListBox.ListBox, {
-			id: inputId,
-			fullWidth: configField,
-			size: effectiveSize,
-			deleteDisabled,
-			selectedKeys,
-			onSelectionChange: (keys) => {
-				onSelectionChange?.(keys);
-				setSelectedKeys(keys);
-			},
-			...props
-		})
-	});
-};
-//#endregion
-//#region components/FormField/TableBoxField.tsx
-const isActionGroup = (action) => "type" in action && action.type === "group";
-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 visibleMenuActions = menuActions.filter((action) => !isActionGroup(action) || action.actions.length > 0);
-	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: [
-			visibleMenuActions.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: visibleMenuActions.map((entry, entryIndex) => {
-					const previousEntry = visibleMenuActions[entryIndex - 1];
-					if (isActionGroup(entry)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-						entryIndex > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Divider, {}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Heading, {
-							size: "sm",
-							children: entry.heading
-						}),
-						entry.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-							...action,
-							disabled: disabled || action.disabled,
-							onClick: () => action.onClick(selectedKey),
-							size: "sm",
-							children: action.label
-						}, action.label))
-					] }, `${entry.heading}-${entryIndex}`);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [previousEntry && isActionGroup(previousEntry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Divider, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-						...entry,
-						disabled: disabled || entry.disabled,
-						onClick: () => entry.onClick(selectedKey),
-						size: "sm",
-						children: entry.label
-					})] }, `${entry.label}-${entryIndex}`);
-				})
-			}),
-			(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_DropdownMenu.DropdownMenu_default.Item, {
-					...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
-Object.defineProperty(exports, "CheckboxField", {
-	enumerable: true,
-	get: function() {
-		return CheckboxField;
-	}
-});
-Object.defineProperty(exports, "CheckboxGroupField", {
-	enumerable: true,
-	get: function() {
-		return CheckboxGroupField;
-	}
-});
-Object.defineProperty(exports, "ComboboxField", {
-	enumerable: true,
-	get: function() {
-		return ComboboxField;
-	}
-});
-Object.defineProperty(exports, "FormField", {
-	enumerable: true,
-	get: function() {
-		return FormField;
-	}
-});
-Object.defineProperty(exports, "ListBoxField", {
-	enumerable: true,
-	get: function() {
-		return ListBoxField;
-	}
-});
-Object.defineProperty(exports, "RadioGroupField", {
-	enumerable: true,
-	get: function() {
-		return RadioGroupField;
-	}
-});
-Object.defineProperty(exports, "SegmentedControlField", {
-	enumerable: true,
-	get: function() {
-		return SegmentedControlField;
-	}
-});
-Object.defineProperty(exports, "SelectField", {
-	enumerable: true,
-	get: function() {
-		return SelectField;
-	}
-});
-Object.defineProperty(exports, "TableBoxField", {
-	enumerable: true,
-	get: function() {
-		return TableBoxField;
-	}
-});
-Object.defineProperty(exports, "TextAreaField", {
-	enumerable: true,
-	get: function() {
-		return TextAreaField;
-	}
-});
-Object.defineProperty(exports, "TextField", {
-	enumerable: true,
-	get: function() {
-		return TextField;
-	}
-});
-Object.defineProperty(exports, "ToggleField", {
-	enumerable: true,
-	get: function() {
-		return ToggleField;
-	}
-});
-Object.defineProperty(exports, "splitOutFormFieldProps", {
-	enumerable: true,
-	get: function() {
-		return splitOutFormFieldProps;
-	}
-});
-
-//# sourceMappingURL=FormField-D3XhxTMg.cjs.map

package/dist/FormField-D3XhxTMg.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormField-D3XhxTMg.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","ListBox","useFormGroup","IconButton","PlusIcon","DropdownMenu","MoreIcon","Fragment","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 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                  <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\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='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            {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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"}