@fuf-stack/uniform 0.4.0 → 0.5.0

package/dist/chunk-I26DVRVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FieldArray/FieldArray.tsx","../src/FieldArray/FieldArrayField.tsx","../src/FieldArray/index.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\n\nimport { useEffect } from 'react';\nimport { useFieldArray } from 'react-hook-form';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport FieldArrayField from './FieldArrayField';\n\nexport type FieldArrayHideOption = 'add' | 'remove' | 'move' | 'insert' | 'all';\nexport type FieldArrayFieldChildren = (\n  name: string,\n  index: number,\n  length: number,\n  move: UseFieldArrayMove,\n  insert: UseFieldArrayInsert<FieldValues, string>,\n  remove: UseFieldArrayRemove,\n  duplicate: (i: number) => void,\n) => JSX.Element;\n\nexport type MoveField = 'drag-drop' | 'button';\n\nexport interface FieldArrayProps {\n  /** function that renders the children with provided Properties. */\n  children: FieldArrayFieldChildren;\n  /** Hide a set of buttons. */\n  hideButtons?: FieldArrayHideOption[];\n  /** label of the FieldArray. */\n  label?: React.ReactNode;\n  /** stops user from deleting all items. */\n  lastNotDeletable?: boolean;\n  /** name the FieldArray is registered in RHF */\n  name: string;\n  /** ID for test purposes. */\n  testId?: string;\n  /* how the fields can be moved */\n  moveField: MoveField[];\n}\n\n/**\n * FieldArray component using react-hook-form\n */\nconst FieldArray = ({\n  children,\n  hideButtons = [],\n  label: _label = undefined,\n  lastNotDeletable = true,\n  name,\n  testId: _testId = undefined,\n  moveField = ['button'],\n}: FieldArrayProps) => {\n  const { control, getValues, getFieldState, register, trigger, watch } =\n    useFormContext();\n\n  const { fields, append, remove, insert, move } = useFieldArray({\n    control,\n    name,\n  });\n\n  const { error, testId, invalid, required } = getFieldState(name, _testId);\n\n  register(`${name}._errors`);\n\n  const formValues = watch();\n\n  useEffect(() => {\n    trigger(`${name}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  // TODO: what about input props?\n  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      isInvalid: invalid,\n      isRequired: required,\n      errorMessage: JSON.stringify(error),\n      label: _label,\n      labelPlacement: 'inside',\n      placeholder: ' ',\n      classNames: { helperWrapper: 'block' },\n    });\n\n  if (lastNotDeletable && fields.length === 0) {\n    append({});\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (active.id !== over?.id) {\n      const oldIndex = fields.findIndex((field) => field.id === active.id);\n      const newIndex = fields.findIndex((field) => field.id === over?.id);\n      move(oldIndex, newIndex);\n    }\n  };\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n    >\n      <SortableContext\n        items={fields.map((field) => field.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        <ul data-testid={testId}>\n          {label && (\n            // eslint-disable-next-line jsx-a11y/label-has-associated-control\n            <label\n              // eslint-disable-next-line react/jsx-props-no-spreading\n              {...getLabelProps()}\n              className={`${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`}\n            >\n              {label}\n            </label>\n          )}\n          <FieldCopyTestIdButton testId={testId} />\n\n          {fields.map((field, index) => {\n            const duplicate = (i: number) => {\n              const values = getValues(name);\n              insert(i + 1, { ...values[i], id: null });\n            };\n\n            return (\n              <FieldArrayField\n                id={field.id}\n                key={field.id}\n                testId={`${testId}_${index}`}\n                className=\"mb-3 mt-5 flex flex-row items-center\"\n                field={field}\n                fields={fields}\n                hideButtons={hideButtons}\n                index={index}\n                insert={insert}\n                lastNotDeletable={lastNotDeletable}\n                move={move}\n                moveField={moveField}\n                name={name}\n                remove={remove}\n              >\n                {children(\n                  `${name}[${index}]`,\n                  index,\n                  fields.length,\n                  move,\n                  insert,\n                  remove,\n                  duplicate,\n                )}\n              </FieldArrayField>\n            );\n          })}\n\n          {!hideButtons.includes('add') && !hideButtons.includes('all') && (\n            <Button\n              testId={`${testId}_append`}\n              size=\"sm\"\n              onClick={() => append({})}\n            >\n              Add\n            </Button>\n          )}\n          {/* @ts-expect-error rhf incompatibility */}\n          {error?._errors && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                {/* @ts-expect-error rhf incompatibility */}\n                <FieldValidationError error={error?._errors} />\n              </div>\n            </div>\n          )}\n        </ul>\n      </SortableContext>\n    </DndContext>\n  );\n};\n\nexport default FieldArray;\n","import type {\n  FieldValues,\n  UseFieldArrayInsert,\n  UseFieldArrayMove,\n  UseFieldArrayRemove,\n} from 'react-hook-form';\nimport type { FieldArrayHideOption, MoveField } from './FieldArray';\n\nimport { useEffect } from 'react';\nimport { FaAngleDown, FaAngleUp, FaGripLines } from 'react-icons/fa';\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useInput } from '@nextui-org/input';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ninterface FieldArrayFieldProps {\n  children: React.ReactNode;\n  className?: string;\n  field: Record<'id', string>;\n  fields: Record<'id', string>[];\n  hideButtons?: FieldArrayHideOption[];\n  id: string | number;\n  index: number;\n  insert: UseFieldArrayInsert<FieldValues, string>;\n  lastNotDeletable?: boolean;\n  move: UseFieldArrayMove;\n  moveField: MoveField[];\n  testId?: string;\n  name: string;\n  remove: UseFieldArrayRemove;\n}\n\n/**\n * FieldArrayField component using react-hook-form\n */\nconst FieldArrayField = ({\n  children,\n  className = undefined,\n  field,\n  fields,\n  hideButtons = [],\n  id,\n  index,\n  insert,\n  lastNotDeletable = true,\n  move,\n  moveField,\n  name,\n  remove,\n  testId = undefined,\n}: FieldArrayFieldProps) => {\n  const { attributes, listeners, setNodeRef, transform, transition } =\n    useSortable({ id });\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    transition,\n  };\n\n  const { getFieldState, register, watch, trigger } = useFormContext();\n  const { error, invalid } = getFieldState(`${name}`, undefined);\n\n  // TODO: what about input props? and label props? Do we need a label?\n  const { getHelperWrapperProps, getErrorMessageProps } = useInput({\n    isInvalid: invalid,\n    errorMessage: JSON.stringify(error),\n    labelPlacement: 'inside',\n    placeholder: ' ',\n    classNames: { helperWrapper: 'block' },\n  });\n\n  // TODO: Check if this is a current issue: _error gets kicked out of the formValidation if no other errors exist. validationError exists, but the structure changes.\n  register(`${name}.${index}._errors`);\n\n  const formValues = watch();\n  useEffect(() => {\n    trigger(`${name}.${index}._errors`);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(formValues)]);\n\n  return (\n    <>\n      <li ref={setNodeRef} style={style} className={className}>\n        {/** Start Button up/down */}\n        {!hideButtons.includes('move') && !hideButtons.includes('all') && (\n          <div className=\"mr-6 flex flex-row items-center\">\n            {moveField.includes('drag-drop') && (\n              <div\n                className=\"mr-2 text-base text-xl\"\n                data-testid={slugify(`${name}_${index}_movebutton`)}\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                {...attributes}\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                {...listeners}\n              >\n                <FaGripLines />\n              </div>\n            )}\n            {moveField.includes('button') && (\n              <div className=\"flex flex-col\">\n                <Button\n                  testId={`${name}.${index}.up`}\n                  disabled={index === 0}\n                  onClick={() => move(index, index - 1)}\n                  className=\"flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleUp />\n                </Button>\n                <Button\n                  testId={`${name}.${index}.down`}\n                  disabled={index === fields.length - 1}\n                  onClick={() => move(index, index + 1)}\n                  className=\"flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm\"\n                >\n                  <FaAngleDown />\n                </Button>\n              </div>\n            )}\n          </div>\n        )}\n        {/** End Button up/down */}\n        <div key={`rest-${field.id}`} className=\"w-full\">\n          <div className=\"mb-2 flex items-center\">\n            {/** RENDER CHILDREN */}\n            <div className=\"flex-grow\" data-testid={testId}>\n              {children}\n            </div>\n            {!hideButtons.includes('remove') &&\n              !hideButtons.includes('all') &&\n              (lastNotDeletable && fields.length === 1 ? null : (\n                <Button onClick={() => remove(index)} className=\"ml-1\">\n                  <svg\n                    className=\"h-4 w-4\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </Button>\n              ))}\n          </div>\n\n          {!hideButtons.includes('insert') &&\n          !hideButtons.includes('all') &&\n          index !== fields.length - 1 ? (\n            <Button\n              className=\"text-xs font-medium\"\n              testId={`add-harbor-button-${index}`}\n              onClick={() => {\n                insert(index + 1, {});\n              }}\n            >\n              insert\n            </Button>\n          ) : null}\n        </div>\n      </li>\n      {error &&\n        typeof error[index] !== 'undefined' &&\n        // @ts-expect-error rhf incompatibility\n        error[Number(index)]?._errors && ( // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          <div {...getHelperWrapperProps()}>\n            {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n            <div {...getErrorMessageProps()}>\n              {/* @ts-expect-error rhf incompatibility */}\n              <FieldValidationError error={error[Number(index)]?._errors} />\n            </div>\n          </div>\n        )}\n    </>\n  );\n};\nexport default FieldArrayField;\n","import FieldArray from './FieldArray';\n\nexport type {\n  FieldArrayProps,\n  FieldArrayHideOption,\n  FieldArrayFieldChildren,\n} from './FieldArray';\n\nexport { FieldArray };\n\nexport default FieldArray;\n"],"mappings":"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","names":["useEffect","useInput","Button","jsx","jsxs","useEffect","useInput","Button","FieldArray_default"]}

package/dist/chunk-NVJKXQ5W.cjs

@@ -0,0 +1,239 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkHT3LKDHXcjs = require('./chunk-HT3LKDHX.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+// src/Select/Select.tsx
+var _reacthookform = require('react-hook-form');
+var _reactselect = require('react-select'); var _reactselect2 = _interopRequireDefault(_reactselect);
+var _select = require('@nextui-org/select');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var InputComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_input`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Input, { "data-testid": testId, ...props });
+};
+var OptionComponent = (props) => {
+  const testId = `${props.selectProps["data-testid"]}_option_${_nullishCoalesce(_optionalChain([props, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.testId]), () => ( _optionalChain([props, 'optionalAccess', _3 => _3.data, 'optionalAccess', _4 => _4.value])))}`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.Option, { ...props }) });
+};
+var DropdownIndicatorComponent = (props) => {
+  const testId = _optionalChain([props, 'optionalAccess', _5 => _5.selectProps, 'access', _6 => _6["data-testid"]]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": `${testId}_dropdown`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactselect.components.DropdownIndicator, { ...props }) });
+};
+var selectVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    clearIndicator: "rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500",
+    control: "rounded-lg border-2 border-gray-200 shadow-sm !duration-150 transition-background hover:border-gray-400 motion-reduce:transition-none dark:border-default-200 hover:dark:border-default-400 focus:dark:border-default-400",
+    crossIcon: "",
+    downChevron: "",
+    dropdownIndicator: "rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-black hover:dark:bg-default-200 hover:dark:text-default-500",
+    group: "",
+    groupHeading: "mb-1 ml-3 mt-2 text-sm text-neutral-500",
+    indicatorsContainer: "gap-1 p-1",
+    indicatorSeparator: "bg-gray-300 dark:bg-default-300",
+    input: "py-0.5 pl-1",
+    loadingIndicator: "",
+    loadingMessage: "",
+    menu: "mt-2 rounded-xl border border-gray-200 bg-default-50 p-1 shadow-sm dark:border-gray-900 dark:bg-default-50",
+    menuList: "",
+    // ensure menu has same z-index as modal so it is visible when rendered in modal
+    // see: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)
+    menuPortal: "!z-50",
+    multiValue: "items-center gap-1.5 rounded bg-gray-100 py-0.5 pl-2 pr-1 dark:bg-default-100",
+    multiValueContainer: "",
+    multiValueLabel: "py-0.5 leading-6",
+    multiValueRemove: "rounded text-neutral-500 hover:cursor-pointer hover:border-gray-300 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500",
+    noOptionsMessage: "rounded-sm bg-gray-50 p-2 text-neutral-500 dark:bg-default-100",
+    option: "rounded px-3 py-2 hover:cursor-pointer",
+    placeholder: "py-0.5 pl-1 text-neutral-500",
+    selectContainer: "",
+    singleValue: "!ml-1 !leading-7",
+    valueContainer: "gap-1 p-1"
+  },
+  variants: {
+    invalid: {
+      true: {
+        control: "border-danger hover:border-danger dark:border-danger hover:dark:border-danger"
+      }
+    },
+    focused: {
+      true: {
+        option: "bg-gray-100 active:bg-gray-200 dark:bg-default-100 dark:active:bg-default-200"
+      }
+    },
+    optionSelected: {
+      true: { option: "bg-gray-300 dark:bg-default-300" }
+    }
+  }
+});
+var Select = ({
+  className = void 0,
+  clearable = true,
+  disabled = false,
+  filterOption = void 0,
+  inputValue = void 0,
+  label: _label = void 0,
+  loading = false,
+  multiSelect = false,
+  name,
+  onInputChange = void 0,
+  options,
+  placeholder = void 0,
+  testId: _testId = void 0
+}) => {
+  const { control, getFieldState } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const {
+    label,
+    getLabelProps,
+    getTriggerProps,
+    getValueProps,
+    getHelperWrapperProps,
+    getErrorMessageProps
+  } = _select.useSelect.call(void 0, {
+    isLoading: loading,
+    isInvalid: invalid,
+    isRequired: required,
+    isDisabled: disabled,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "outside",
+    children: []
+  });
+  const {
+    clearIndicator: clearIndicatorSlot,
+    control: controlSlot,
+    dropdownIndicator: dropdownIndicatorSlot,
+    groupHeading: groupHeadingSlot,
+    indicatorsContainer: indicatorContainerSlot,
+    indicatorSeparator: indicatorSeparatorSlot,
+    input: inputSlot,
+    menu: menuSlot,
+    menuPortal: menuPortalSlot,
+    multiValue: multiValueSlot,
+    multiValueLabel: multiValueLabelSlot,
+    multiValueRemove: multiValueRemoveSlot,
+    noOptionsMessage: noOptionsMessageSlot,
+    option: optionSlot,
+    placeholder: placeholderSlot,
+    singleValue: singleValueSlot,
+    valueContainer: valueContainerSlot
+  } = selectVariants({ invalid });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reacthookform.Controller,
+    {
+      control,
+      name,
+      render: ({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        field: { onChange, value, ref, onBlur }
+      }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _pixelutils.cn.call(void 0, className, "mt-2"), "data-testid": `${testId}_select`, children: [
+        label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "label",
+          {
+            htmlFor: `react-select-${name}-input`,
+            className: `${getLabelProps().className} !pointer-events-auto !static -mb-1 ml-1`,
+            children: [
+              label,
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHT3LKDHXcjs.FieldCopyTestIdButton_default, { testId })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _reactselect2.default,
+          {
+            "aria-errormessage": "",
+            "aria-invalid": invalid,
+            "data-testid": `${testId}_select`,
+            ...() => {
+              const { className: _className, ...rest } = getTriggerProps();
+              return rest;
+            },
+            "aria-labelledby": _optionalChain([getTriggerProps, 'call', _7 => _7(), 'access', _8 => _8["aria-labelledby"], 'optionalAccess', _9 => _9.split, 'call', _10 => _10(" "), 'access', _11 => _11[1]]),
+            classNames: {
+              control: ({ isFocused }) => (
+                // border focus style
+                controlSlot({
+                  className: !invalid && isFocused && "!border-primary"
+                })
+              ),
+              placeholder: () => placeholderSlot(),
+              input: () => inputSlot(),
+              valueContainer: () => valueContainerSlot(),
+              singleValue: () => singleValueSlot({
+                className: `${getValueProps().className}`
+              }),
+              multiValue: () => multiValueSlot(),
+              multiValueLabel: () => multiValueLabelSlot({
+                className: `${getValueProps().className}`
+              }),
+              multiValueRemove: () => multiValueRemoveSlot(),
+              indicatorsContainer: () => indicatorContainerSlot(),
+              clearIndicator: () => clearIndicatorSlot(),
+              indicatorSeparator: () => indicatorSeparatorSlot(),
+              dropdownIndicator: () => dropdownIndicatorSlot(),
+              menu: () => menuSlot(),
+              groupHeading: () => groupHeadingSlot(),
+              option: ({ isFocused, isSelected }) => optionSlot({
+                focused: isFocused,
+                optionSelected: isSelected
+              }),
+              noOptionsMessage: () => noOptionsMessageSlot(),
+              menuPortal: () => menuPortalSlot()
+            },
+            components: {
+              Input: InputComponent,
+              Option: OptionComponent,
+              DropdownIndicator: DropdownIndicatorComponent
+            },
+            filterOption,
+            instanceId: name,
+            inputValue,
+            isClearable: clearable,
+            isDisabled: disabled,
+            isLoading: loading,
+            isMulti: multiSelect,
+            options,
+            placeholder,
+            unstyled: true,
+            onChange: (option) => {
+              if (multiSelect) {
+                const transformedOptions = [];
+                _optionalChain([option, 'optionalAccess', _12 => _12.forEach, 'call', _13 => _13((o) => {
+                  transformedOptions.push(o.value);
+                })]);
+                onChange(transformedOptions);
+              } else {
+                onChange(option && option.value);
+              }
+            },
+            onInputChange,
+            menuPortalTarget: _optionalChain([document, 'access', _14 => _14.getElementById, 'call', _15 => _15("modal_body"), 'optionalAccess', _16 => _16.parentNode, 'optionalAccess', _17 => _17.parentNode]) || document.body,
+            value: options.find((option) => option.value === value),
+            onBlur,
+            name,
+            ref
+          }
+        ),
+        error && // eslint-disable-next-line react/jsx-props-no-spreading
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error }) }) })
+      ] })
+    }
+  );
+};
+var Select_default = Select;
+
+// src/Select/index.ts
+var Select_default2 = Select_default;
+
+
+
+
+exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
+//# sourceMappingURL=chunk-NVJKXQ5W.cjs.map

package/dist/chunk-NVJKXQ5W.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","sourcesContent":["import type { Props } from 'react-select';\n\nimport { Controller } from 'react-hook-form';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@nextui-org/select';\n\nimport { cn, tv } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\nexport interface SelectProps {\n  /** CSS class name */\n  className?: string; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_input`;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types, react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_option_${props?.data?.testId ?? props?.data?.value}`;\n  return (\n    <div data-testid={testId}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/prop-types\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_dropdown`}>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\nexport const selectVariants = tv({\n  slots: {\n    clearIndicator:\n      'rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500',\n    control:\n      'rounded-lg border-2 border-gray-200 shadow-sm !duration-150 transition-background hover:border-gray-400 motion-reduce:transition-none dark:border-default-200 hover:dark:border-default-400 focus:dark:border-default-400',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-neutral-500 hover:cursor-pointer hover:bg-gray-200 hover:text-black hover:dark:bg-default-200 hover:dark:text-default-500',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-neutral-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-gray-300 dark:bg-default-300',\n    input: 'py-0.5 pl-1',\n    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-gray-200 bg-default-50 p-1 shadow-sm dark:border-gray-900 dark:bg-default-50',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: '!z-50',\n    multiValue:\n      'items-center gap-1.5 rounded bg-gray-100 py-0.5 pl-2 pr-1 dark:bg-default-100',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-neutral-500 hover:cursor-pointer hover:border-gray-300 hover:text-neutral-800 hover:dark:bg-default-200 hover:dark:text-default-500',\n    noOptionsMessage:\n      'rounded-sm bg-gray-50 p-2 text-neutral-500 dark:bg-default-100',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'py-0.5 pl-1 text-neutral-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n  variants: {\n    invalid: {\n      true: {\n        control:\n          'border-danger hover:border-danger dark:border-danger hover:dark:border-danger',\n      },\n    },\n    focused: {\n      true: {\n        option:\n          'bg-gray-100 active:bg-gray-200 dark:bg-default-100 dark:active:bg-default-200',\n      },\n    },\n    optionSelected: {\n      true: { option: 'bg-gray-300 dark:bg-default-300' },\n    },\n  },\n});\n\n/** Select component based on [NextUI Select](https://nextui.org/docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  disabled = false,\n  filterOption = undefined,\n  inputValue = undefined,\n  label: _label = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  testId: _testId = undefined,\n}: SelectProps) => {\n  const { control, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const {\n    label,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    getHelperWrapperProps,\n    getErrorMessageProps,\n  } = useSelect({\n    isLoading: loading,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    errorMessage: JSON.stringify(error),\n    label: _label,\n    labelPlacement: 'outside',\n    children: [],\n  });\n\n  const {\n    clearIndicator: clearIndicatorSlot,\n    control: controlSlot,\n    dropdownIndicator: dropdownIndicatorSlot,\n    groupHeading: groupHeadingSlot,\n    indicatorsContainer: indicatorContainerSlot,\n    indicatorSeparator: indicatorSeparatorSlot,\n    input: inputSlot,\n    menu: menuSlot,\n    menuPortal: menuPortalSlot,\n    multiValue: multiValueSlot,\n    multiValueLabel: multiValueLabelSlot,\n    multiValueRemove: multiValueRemoveSlot,\n    noOptionsMessage: noOptionsMessageSlot,\n    option: optionSlot,\n    placeholder: placeholderSlot,\n    singleValue: singleValueSlot,\n    valueContainer: valueContainerSlot,\n  } = selectVariants({ invalid });\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        field: { onChange, value, ref, onBlur },\n      }) => (\n        <div className={cn(className, 'mt-2')} data-testid={`${testId}_select`}>\n          {label && (\n            <label\n              htmlFor={`react-select-${name}-input`} // {getTriggerProps().id}\n              className={`${getLabelProps().className} !pointer-events-auto !static -mb-1 ml-1`}\n            >\n              {label}\n              <FieldCopyTestIdButton testId={testId} />\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-invalid={invalid}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={`${testId}_select`}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...() => {\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/naming-convention\n              const { className: _className, ...rest } = getTriggerProps();\n              return rest;\n            }}\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            classNames={{\n              control: ({ isFocused }) =>\n                // border focus style\n                controlSlot({\n                  className: !invalid && isFocused && '!border-primary',\n                }),\n              placeholder: () => placeholderSlot(),\n              input: () => inputSlot(),\n              valueContainer: () => valueContainerSlot(),\n              singleValue: () =>\n                singleValueSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValue: () => multiValueSlot(),\n              multiValueLabel: () =>\n                multiValueLabelSlot({\n                  className: `${getValueProps().className}`,\n                }),\n              multiValueRemove: () => multiValueRemoveSlot(),\n              indicatorsContainer: () => indicatorContainerSlot(),\n              clearIndicator: () => clearIndicatorSlot(),\n              indicatorSeparator: () => indicatorSeparatorSlot(),\n              dropdownIndicator: () => dropdownIndicatorSlot(),\n              menu: () => menuSlot(),\n              groupHeading: () => groupHeadingSlot(),\n              option: ({ isFocused, isSelected }) =>\n                optionSlot({\n                  focused: isFocused,\n                  optionSelected: isSelected,\n                }),\n              noOptionsMessage: () => noOptionsMessageSlot(),\n              menuPortal: () => menuPortalSlot(),\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n            }}\n            filterOption={filterOption}\n            instanceId={name}\n            inputValue={inputValue}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            options={options}\n            placeholder={placeholder}\n            unstyled\n            onChange={(option) => {\n              if (multiSelect) {\n                const transformedOptions: string[] = [];\n                // @ts-expect-error in this case option is an array.\n                option?.forEach((o: { value: string }) => {\n                  transformedOptions.push(o.value);\n                });\n                onChange(transformedOptions);\n              } else {\n                // @ts-expect-error in this case option is of type SelectOption and has the property value.\n                onChange(option && option.value);\n              }\n            }}\n            onInputChange={onInputChange}\n            // attach menu modal or body so it works in card and modal\n            menuPortalTarget={\n              (document.getElementById('modal_body')?.parentNode\n                ?.parentNode as HTMLElement) || document.body\n            }\n            value={options.find((option) => option.value === value)}\n            onBlur={onBlur}\n            name={name}\n            ref={ref}\n          />\n          {error && (\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            <div {...getHelperWrapperProps()}>\n              {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n              <div {...getErrorMessageProps()}>\n                <FieldValidationError error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}

package/dist/chunk-OS4SMYPO.cjs

@@ -0,0 +1,287 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkHT3LKDHXcjs = require('./chunk-HT3LKDHX.cjs');
+
+
+var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+
+
+var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
+
+
+var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
+
+// src/FieldArray/FieldArray.tsx
+var _react = require('react');
+var _reacthookform = require('react-hook-form');
+
+
+
+
+
+
+
+var _core = require('@dnd-kit/core');
+
+
+
+var _modifiers = require('@dnd-kit/modifiers');
+
+
+
+var _sortable = require('@dnd-kit/sortable');
+var _input = require('@nextui-org/input');
+var _pixels = require('@fuf-stack/pixels');
+
+// src/FieldArray/FieldArrayField.tsx
+
+var _fa = require('react-icons/fa');
+
+var _utilities = require('@dnd-kit/utilities');
+
+
+var _jsxruntime = require('react/jsx-runtime');
+var FieldArrayField = ({
+  children,
+  className = void 0,
+  field,
+  fields,
+  hideButtons = [],
+  id,
+  index,
+  insert,
+  lastNotDeletable = true,
+  move,
+  moveField,
+  name,
+  remove,
+  testId = void 0
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = _sortable.useSortable.call(void 0, { id });
+  const style = {
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  const { getFieldState, register, watch, trigger } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { error, invalid } = getFieldState(`${name}`, void 0);
+  const { getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
+    isInvalid: invalid,
+    errorMessage: JSON.stringify(error),
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  register(`${name}.${index}._errors`);
+  const formValues = watch();
+  _react.useEffect.call(void 0, () => {
+    trigger(`${name}.${index}._errors`);
+  }, [JSON.stringify(formValues)]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ref: setNodeRef, style, className, children: [
+      !hideButtons.includes("move") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mr-6 flex flex-row items-center", children: [
+        moveField.includes("drag-drop") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: "mr-2 text-base text-xl",
+            "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, `${name}_${index}_movebutton`),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaGripLines, {})
+          }
+        ),
+        moveField.includes("button") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _pixels.Button,
+            {
+              testId: `${name}.${index}.up`,
+              disabled: index === 0,
+              onClick: () => move(index, index - 1),
+              className: "flex rounded-b-none rounded-t-md border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleUp, {})
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _pixels.Button,
+            {
+              testId: `${name}.${index}.down`,
+              disabled: index === fields.length - 1,
+              onClick: () => move(index, index + 1),
+              className: "flex rounded-b-md rounded-t-none border border-gray-300 px-2 py-2 shadow-sm",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaAngleDown, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-grow", "data-testid": testId, children }),
+          !hideButtons.includes("remove") && !hideButtons.includes("all") && (lastNotDeletable && fields.length === 1 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pixels.Button, { onClick: () => remove(index), className: "ml-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: "h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ) }))
+        ] }),
+        !hideButtons.includes("insert") && !hideButtons.includes("all") && index !== fields.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _pixels.Button,
+          {
+            className: "text-xs font-medium",
+            testId: `add-harbor-button-${index}`,
+            onClick: () => {
+              insert(index + 1, {});
+            },
+            children: "insert"
+          }
+        ) : null
+      ] }, `rest-${field.id}`)
+    ] }),
+    error && typeof error[index] !== "undefined" && // @ts-expect-error rhf incompatibility
+    _optionalChain([error, 'access', _ => _[Number(index)], 'optionalAccess', _2 => _2._errors]) && // TODO: was String(). Check if Number is correct. (same below in FieldValidationError)
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error: _optionalChain([error, 'access', _3 => _3[Number(index)], 'optionalAccess', _4 => _4._errors]) }) }) })
+  ] });
+};
+var FieldArrayField_default = FieldArrayField;
+
+// src/FieldArray/FieldArray.tsx
+
+var FieldArray = ({
+  children,
+  hideButtons = [],
+  label: _label = void 0,
+  lastNotDeletable = true,
+  name,
+  testId: _testId = void 0,
+  moveField = ["button"]
+}) => {
+  const { control, getValues, getFieldState, register, trigger, watch } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const { fields, append, remove, insert, move } = _reacthookform.useFieldArray.call(void 0, {
+    control,
+    name
+  });
+  const { error, testId, invalid, required } = getFieldState(name, _testId);
+  register(`${name}._errors`);
+  const formValues = watch();
+  _react.useEffect.call(void 0, () => {
+    trigger(`${name}._errors`);
+  }, [JSON.stringify(formValues)]);
+  const { label, getLabelProps, getHelperWrapperProps, getErrorMessageProps } = _input.useInput.call(void 0, {
+    isInvalid: invalid,
+    isRequired: required,
+    errorMessage: JSON.stringify(error),
+    label: _label,
+    labelPlacement: "inside",
+    placeholder: " ",
+    classNames: { helperWrapper: "block" }
+  });
+  if (lastNotDeletable && fields.length === 0) {
+    append({});
+  }
+  const sensors = _core.useSensors.call(void 0, 
+    _core.useSensor.call(void 0, _core.PointerSensor),
+    _core.useSensor.call(void 0, _core.KeyboardSensor)
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== _optionalChain([over, 'optionalAccess', _5 => _5.id])) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === _optionalChain([over, 'optionalAccess', _6 => _6.id]));
+      move(oldIndex, newIndex);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _core.DndContext,
+    {
+      sensors,
+      collisionDetection: _core.closestCenter,
+      onDragEnd: handleDragEnd,
+      modifiers: [_modifiers.restrictToVerticalAxis, _modifiers.restrictToWindowEdges],
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _sortable.SortableContext,
+        {
+          items: fields.map((field) => field.id),
+          strategy: _sortable.verticalListSortingStrategy,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { "data-testid": testId, children: [
+            label && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "label",
+              {
+                ...getLabelProps(),
+                className: `${getLabelProps().className} !pointer-events-auto !static !z-0 -mb-1 ml-1 !inline-block`,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHT3LKDHXcjs.FieldCopyTestIdButton_default, { testId }),
+            fields.map((field, index) => {
+              const duplicate = (i) => {
+                const values = getValues(name);
+                insert(i + 1, { ...values[i], id: null });
+              };
+              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                FieldArrayField_default,
+                {
+                  id: field.id,
+                  testId: `${testId}_${index}`,
+                  className: "mb-3 mt-5 flex flex-row items-center",
+                  field,
+                  fields,
+                  hideButtons,
+                  index,
+                  insert,
+                  lastNotDeletable,
+                  move,
+                  moveField,
+                  name,
+                  remove,
+                  children: children(
+                    `${name}[${index}]`,
+                    index,
+                    fields.length,
+                    move,
+                    insert,
+                    remove,
+                    duplicate
+                  )
+                },
+                field.id
+              );
+            }),
+            !hideButtons.includes("add") && !hideButtons.includes("all") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _pixels.Button,
+              {
+                testId: `${testId}_append`,
+                size: "sm",
+                onClick: () => append({}),
+                children: "Add"
+              }
+            ),
+            _optionalChain([error, 'optionalAccess', _7 => _7._errors]) && // eslint-disable-next-line react/jsx-props-no-spreading
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQTL5FREEcjs.FieldValidationError_default, { error: _optionalChain([error, 'optionalAccess', _8 => _8._errors]) }) }) })
+          ] })
+        }
+      )
+    }
+  );
+};
+var FieldArray_default = FieldArray;
+
+// src/FieldArray/index.ts
+var FieldArray_default2 = FieldArray_default;
+
+
+
+
+exports.FieldArray_default = FieldArray_default; exports.FieldArray_default2 = FieldArray_default2;
+//# sourceMappingURL=chunk-OS4SMYPO.cjs.map