@fuf-stack/uniform 0.9.4 → 0.9.6

package/dist/{chunk-UHFAY5XK.cjs → chunk-NXTXKBTP.cjs}

@@ -3,7 +3,7 @@
 var _chunkKMMS4G7Acjs = require('./chunk-KMMS4G7A.cjs');
 
 
-var _chunkQTL5FREEcjs = require('./chunk-QTL5FREE.cjs');
+var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
 
 
 var _chunkLDCRR7FPcjs = require('./chunk-LDCRR7FP.cjs');
@@ -17,9 +17,9 @@ var _pixelutils = require('@fuf-stack/pixel-utils');
 var _jsxruntime = require('react/jsx-runtime');
 var selectVariants = _pixelutils.tv.call(void 0, {
   slots: {
-    base: "",
+    base: "group",
     clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
-    control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 motion-reduce:transition-none",
+    control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
     control_focused: "border-primary hover:border-primary",
     crossIcon: "",
     downChevron: "",
@@ -29,10 +29,11 @@ var selectVariants = _pixelutils.tv.call(void 0, {
     indicatorsContainer: "gap-1 p-1",
     indicatorSeparator: "bg-default-300",
     input: "py-0.5 pl-1",
-    label: "!pointer-events-auto relative bottom-2 ml-1 inline",
+    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts
+    label: 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-["*"]',
     loadingIndicator: "",
     loadingMessage: "",
-    menu: "mt-2 rounded-xl border border-default-200 bg-background p-1 shadow-lg",
+    menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
     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)
@@ -49,13 +50,6 @@ var selectVariants = _pixelutils.tv.call(void 0, {
     selectContainer: "",
     singleValue: "!ml-1 !leading-7",
     valueContainer: "gap-1 p-1"
-  },
-  variants: {
-    invalid: {
-      true: {
-        control: "border-danger hover:border-danger"
-      }
-    }
   }
 });
 var InputComponent = (props) => {
@@ -75,7 +69,7 @@ var Select = ({
   clearable = true,
   disabled = false,
   filterOption = void 0,
-  formatOptionLabel = void 0,
+  renderOptionLabel = void 0,
   inputValue = void 0,
   label: _label = void 0,
   loading = false,
@@ -89,14 +83,13 @@ var Select = ({
   const { control, getFieldState } = _chunkLDCRR7FPcjs.useFormContext.call(void 0, );
   const { error, invalid, required, testId } = getFieldState(name, _testId);
   const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
-  const variants = selectVariants({ invalid });
+  const variants = selectVariants();
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
   const {
     getBaseProps,
     getErrorMessageProps,
     getHelperWrapperProps,
     getLabelProps,
-    getMainWrapperProps,
     getTriggerProps,
     getValueProps,
     label
@@ -120,109 +113,107 @@ var Select = ({
       render: ({
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         field: { onChange, value, ref, onBlur }
-      }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
           ...getBaseProps(),
-          className: _pixelutils.cn.call(void 0, classNames.base, "group mt-2"),
+          className: _pixelutils.cn.call(void 0, classNames.base),
           "data-testid": testId,
-          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ...getMainWrapperProps(), children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
-              label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                "label",
-                {
-                  htmlFor: `react-select-${name}-input`,
-                  className: _pixelutils.cn.call(void 0, getLabelProps().className, classNames.label),
-                  children: [
-                    label,
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default, { testId })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _reactselect2.default,
-                {
-                  "aria-errormessage": "",
-                  "aria-labelledby": _optionalChain([getTriggerProps, 'call', _7 => _7(), 'access', _8 => _8["aria-labelledby"], 'optionalAccess', _9 => _9.split, 'call', _10 => _10(" "), 'access', _11 => _11[1]]),
-                  "aria-invalid": invalid,
-                  classNames: {
-                    control: () => _pixelutils.cn.call(void 0, classNames.control, {
-                      [classNames.control_focused]: isFocused && !invalid
-                    }),
-                    clearIndicator: () => classNames.clearIndicator,
-                    dropdownIndicator: () => classNames.dropdownIndicator,
-                    groupHeading: () => classNames.groupHeading,
-                    indicatorsContainer: () => classNames.indicatorsContainer,
-                    indicatorSeparator: () => classNames.indicatorSeparator,
-                    input: () => classNames.input,
-                    menu: () => classNames.menu,
-                    menuList: () => classNames.menuList,
-                    menuPortal: () => classNames.menuPortal,
-                    multiValue: () => classNames.multiValue,
-                    multiValueLabel: () => _pixelutils.cn.call(void 0, 
-                      classNames.multiValueLabel,
-                      `${getValueProps().className}`
-                    ),
-                    multiValueRemove: () => classNames.multiValueRemove,
-                    noOptionsMessage: () => classNames.noOptionsMessage,
-                    option: ({
-                      isFocused: optionIsFocused,
-                      isSelected: optionIsSelected
-                    }) => _pixelutils.cn.call(void 0, classNames.option, {
-                      [classNames.option_focused]: optionIsFocused,
-                      [classNames.option_selected]: optionIsSelected
-                    }),
-                    placeholder: () => classNames.placeholder,
-                    singleValue: () => _pixelutils.cn.call(void 0, classNames.singleValue, `${getValueProps().className}`),
-                    valueContainer: () => classNames.valueContainer
-                  },
-                  components: {
-                    Input: InputComponent,
-                    Option: OptionComponent,
-                    DropdownIndicator: DropdownIndicatorComponent
-                  },
-                  "data-testid": `${testId}_select`,
-                  filterOption,
-                  formatOptionLabel,
-                  inputValue,
-                  instanceId: name,
-                  isClearable: clearable,
-                  isDisabled: disabled,
-                  isLoading: loading,
-                  isMulti: multiSelect,
-                  name,
-                  menuPosition: "fixed",
-                  menuShouldBlockScroll: true,
-                  options,
-                  placeholder,
-                  onBlur: (_e) => {
-                    setIsFocused(false);
-                    return onBlur();
-                  },
-                  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);
-                    }
-                  },
-                  onFocus: (_e) => {
-                    setIsFocused(true);
-                  },
-                  onInputChange,
-                  ref,
-                  value: options.find((option) => option.value === value),
-                  unstyled: true
-                }
-              )
-            ] }),
+          "data-required": required,
+          children: [
+            label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "label",
+              {
+                className: classNames.label,
+                "data-slot": "label",
+                htmlFor: `react-select-${name}-input`,
+                id: getLabelProps().id,
+                children: [
+                  label,
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKMMS4G7Acjs.FieldCopyTestIdButton_default, { testId })
+                ]
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _reactselect2.default,
+              {
+                "aria-errormessage": "",
+                "aria-labelledby": _optionalChain([getTriggerProps, 'call', _7 => _7(), 'access', _8 => _8["aria-labelledby"], 'optionalAccess', _9 => _9.split, 'call', _10 => _10(" "), 'access', _11 => _11[1]]),
+                "aria-invalid": invalid,
+                classNames: {
+                  control: () => _pixelutils.cn.call(void 0, classNames.control, {
+                    [classNames.control_focused]: isFocused && !invalid
+                  }),
+                  clearIndicator: () => classNames.clearIndicator,
+                  dropdownIndicator: () => classNames.dropdownIndicator,
+                  groupHeading: () => classNames.groupHeading,
+                  indicatorsContainer: () => classNames.indicatorsContainer,
+                  indicatorSeparator: () => classNames.indicatorSeparator,
+                  input: () => classNames.input,
+                  menu: () => classNames.menu,
+                  menuList: () => classNames.menuList,
+                  menuPortal: () => classNames.menuPortal,
+                  multiValue: () => classNames.multiValue,
+                  multiValueLabel: () => _pixelutils.cn.call(void 0, classNames.multiValueLabel, `${getValueProps().className}`),
+                  multiValueRemove: () => classNames.multiValueRemove,
+                  noOptionsMessage: () => classNames.noOptionsMessage,
+                  option: ({
+                    isFocused: optionIsFocused,
+                    isSelected: optionIsSelected
+                  }) => _pixelutils.cn.call(void 0, classNames.option, {
+                    [classNames.option_focused]: optionIsFocused,
+                    [classNames.option_selected]: optionIsSelected
+                  }),
+                  placeholder: () => classNames.placeholder,
+                  singleValue: () => _pixelutils.cn.call(void 0, classNames.singleValue, `${getValueProps().className}`),
+                  valueContainer: () => classNames.valueContainer
+                },
+                components: {
+                  Input: InputComponent,
+                  Option: OptionComponent,
+                  DropdownIndicator: DropdownIndicatorComponent
+                },
+                "data-testid": `${testId}_select`,
+                filterOption,
+                formatOptionLabel: renderOptionLabel,
+                inputValue,
+                instanceId: name,
+                isClearable: clearable,
+                isDisabled: disabled,
+                isLoading: loading,
+                isMulti: multiSelect,
+                name,
+                menuPosition: "fixed",
+                menuShouldBlockScroll: true,
+                options,
+                placeholder,
+                onBlur: (_e) => {
+                  setIsFocused(false);
+                  return onBlur();
+                },
+                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);
+                  }
+                },
+                onFocus: (_e) => {
+                  setIsFocused(true);
+                },
+                onInputChange,
+                ref,
+                value: options.find((option) => option.value === value),
+                unstyled: true
+              }
+            ),
             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 }) }) })
-          ] })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...getErrorMessageProps(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOHJYXA6Rcjs.FieldValidationError_default, { error }) }) })
+          ]
         }
       )
     }
@@ -237,4 +228,4 @@ var Select_default2 = Select_default;
 
 
 exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
-//# sourceMappingURL=chunk-UHFAY5XK.cjs.map
+//# sourceMappingURL=chunk-NXTXKBTP.cjs.map

package/dist/chunk-NXTXKBTP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-NXTXKBTP.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-NXTXKBTP.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport { Controller } from 'react-hook-form';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@nextui-org/select';\n\nimport { cn, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group',\n    clearIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n    control:\n      'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n    control_focused: 'border-primary hover:border-primary',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n    group: '',\n    groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: '',\n    menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\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: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n    noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'py-0.5 pl-1 text-foreground-500',\n    selectContainer: '',\n    singleValue: '!ml-1 !leading-7',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ntype SelectOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n};\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\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\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  renderOptionLabel = 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 [isFocused, setIsFocused] = useState(false);\n\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const {\n    getBaseProps,\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    getTriggerProps,\n    getValueProps,\n    label,\n  } = useSelect({\n    children: [],\n    classNames,\n    errorMessage: JSON.stringify(error),\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label: _label,\n    labelPlacement: 'outside',\n    placeholder: ' ',\n  });\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\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...getBaseProps()}\n          className={cn(classNames.base)}\n          data-testid={testId}\n          // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n          data-required={required}\n        >\n          {label && (\n            <label\n              className={classNames.label}\n              data-slot=\"label\"\n              htmlFor={`react-select-${name}-input`}\n              id={getLabelProps().id}\n            >\n              {label}\n              <FieldCopyTestIdButton testId={testId} />\n            </label>\n          )}\n          <ReactSelect\n            aria-errormessage=\"\"\n            aria-labelledby={\n              getTriggerProps()['aria-labelledby']?.split(' ')[1]\n            }\n            aria-invalid={invalid}\n            classNames={{\n              control: () =>\n                cn(classNames.control, {\n                  [classNames.control_focused]: isFocused && !invalid,\n                }),\n              clearIndicator: () => classNames.clearIndicator,\n              dropdownIndicator: () => classNames.dropdownIndicator,\n              groupHeading: () => classNames.groupHeading,\n              indicatorsContainer: () => classNames.indicatorsContainer,\n              indicatorSeparator: () => classNames.indicatorSeparator,\n              input: () => classNames.input,\n              menu: () => classNames.menu,\n              menuList: () => classNames.menuList,\n              menuPortal: () => classNames.menuPortal,\n              multiValue: () => classNames.multiValue,\n              multiValueLabel: () =>\n                cn(classNames.multiValueLabel, `${getValueProps().className}`),\n              multiValueRemove: () => classNames.multiValueRemove,\n              noOptionsMessage: () => classNames.noOptionsMessage,\n              option: ({\n                isFocused: optionIsFocused,\n                isSelected: optionIsSelected,\n              }) =>\n                cn(classNames.option, {\n                  [classNames.option_focused]: optionIsFocused,\n                  [classNames.option_selected]: optionIsSelected,\n                }),\n              placeholder: () => classNames.placeholder,\n              singleValue: () =>\n                cn(classNames.singleValue, `${getValueProps().className}`),\n              valueContainer: () => classNames.valueContainer,\n            }}\n            components={{\n              Input: InputComponent,\n              Option: OptionComponent,\n              DropdownIndicator: DropdownIndicatorComponent,\n            }}\n            // Does not affect the testId of the select, but is needed to pass it to sub-components\n            data-testid={`${testId}_select`}\n            filterOption={filterOption}\n            formatOptionLabel={renderOptionLabel}\n            inputValue={inputValue}\n            instanceId={name}\n            isClearable={clearable}\n            isDisabled={disabled}\n            isLoading={loading}\n            isMulti={multiSelect}\n            name={name}\n            // set menuPosition to fixed so that menu can be rendered\n            // inside Card / Modal components, menuShouldBlockScroll\n            // prevents container scroll when menu is open\n            menuPosition=\"fixed\"\n            menuShouldBlockScroll\n            options={options}\n            placeholder={placeholder}\n            onBlur={(_e) => {\n              setIsFocused(false);\n              return onBlur();\n            }}\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            onFocus={(_e) => {\n              setIsFocused(true);\n            }}\n            onInputChange={onInputChange}\n            ref={ref}\n            // set complete option as value by current field value\n            value={options.find((option) => option.value === value)}\n            unstyled\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-QTL5FREE.cjs → chunk-OHJYXA6R.cjs}

@@ -5,20 +5,21 @@ var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
 // src/partials/FieldValidationError/FieldValidationError.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var FieldValidationError = ({
+  className = void 0,
   error,
   testId = void 0
 }) => {
   if (!error) {
     return null;
   }
-  let tmp_errors = [];
+  let tmpErrors = [];
   if (typeof error === "object" && !(error instanceof Array)) {
-    const error_object = error;
+    const errorObject = error;
     Object.keys(error).forEach((key) => {
-      tmp_errors = [...tmp_errors, ...error_object[key]];
+      tmpErrors = [...tmpErrors, ...errorObject[key]];
     });
   }
-  const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
+  const errorArray = JSON.stringify(tmpErrors) !== "[]" ? tmpErrors : error;
   const errorStrings = errorArray.map((e) => e.message);
   const ariaString = `Error: ${errorStrings.join("\n")}`;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -26,6 +27,7 @@ var FieldValidationError = ({
     {
       "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || errorStrings.join()),
       "aria-label": ariaString,
+      className,
       children: errorStrings.map((errorString, i) => (
         // eslint-disable-next-line react/no-array-index-key
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: errorString }) }, `error_${i}`)
@@ -42,4 +44,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
 
 
 exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
-//# sourceMappingURL=chunk-QTL5FREE.cjs.map
+//# sourceMappingURL=chunk-OHJYXA6R.cjs.map

package/dist/chunk-OHJYXA6R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-OHJYXA6R.cjs","../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACyCU,+CAAA;AAhCV,IAAM,qBAAA,EAAuB,CAAC;AAAA,EAC5B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,KAAA;AAAA,EACA,OAAA,EAAS,KAAA;AACX,CAAA,EAAA,GAAiC;AAC/B,EAAA,GAAA,CAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,UAAA,EAA0B,CAAC,CAAA;AAE/B,EAAA,GAAA,CAAI,OAAO,MAAA,IAAU,SAAA,GAAY,CAAA,CAAE,MAAA,WAAiB,KAAA,CAAA,EAAQ;AAC1D,IAAA,MAAM,YAAA,EAAc,KAAA;AACpB,IAAA,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,EAAA,GAAQ;AAClC,MAAA,UAAA,EAAY,CAAC,GAAG,SAAA,EAAW,GAAG,WAAA,CAAY,GAAG,CAAC,CAAA;AAAA,IAChD,CAAC,CAAA;AAAA,EACH;AAEA,EAAA,MAAM,WAAA,EACJ,IAAA,CAAK,SAAA,CAAU,SAAS,EAAA,IAAM,KAAA,EAAO,UAAA,EAAa,KAAA;AACpD,EAAA,MAAM,aAAA,EAAyB,UAAA,CAAW,GAAA,CAAI,CAAC,CAAA,EAAA,GAAM,CAAA,CAAE,OAAO,CAAA;AAC9D,EAAA,MAAM,WAAA,EAAa,CAAA,OAAA,EAAU,YAAA,CAAa,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAGlD,EAAA;AAAC,IAAA;AAAA,IAAA;AAC6C,MAAA;AAChC,MAAA;AACZ,MAAA;AAEwC,MAAA;AAAA;AAGpC,wBAAA;AAEH,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;AAEe;ADdwC;AACA;AEjCxC;AFmCwC;AACA;AACA;AACA;AACA","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-OHJYXA6R.cjs","sourcesContent":[null,"import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n  className?: string;\n  error: FieldError[] | Record<string, FieldError[]>;\n  testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error,\n  testId = undefined,\n}: FieldValidationErrorProps) => {\n  if (!error) {\n    return null;\n  }\n\n  let tmpErrors: FieldError[] = [];\n\n  if (typeof error === 'object' && !(error instanceof Array)) {\n    const errorObject = error as Record<string, FieldError[]>;\n    Object.keys(error).forEach((key) => {\n      tmpErrors = [...tmpErrors, ...errorObject[key]];\n    });\n  }\n\n  const errorArray: FieldError[] =\n    JSON.stringify(tmpErrors) !== '[]' ? tmpErrors : (error as FieldError[]);\n  const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n  const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n  return (\n    <ul\n      data-testid={slugify(testId || errorStrings.join())}\n      aria-label={ariaString} // TODO: ist das richtig @Hannes?\n      className={className}\n    >\n      {errorStrings.map((errorString: string, i: number) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={`error_${i}`}>\n          <div>{errorString}</div>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"]}

package/dist/{chunk-ZOVKQ7MN.js → chunk-PFX4YRWI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-T3CCNJHK.js";
 import {
   FieldValidationError_default
-} from "./chunk-DBLODROX.js";
+} from "./chunk-WKM2D7LF.js";
 import {
   useFormContext
 } from "./chunk-HWDQZO7X.js";
@@ -12,9 +12,24 @@ import {
 import { Controller } from "react-hook-form";
 import { useInput } from "@nextui-org/input";
 import { Switch as NextSwitch } from "@nextui-org/switch";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var switchVariants = tv({
+  slots: {
+    base: "",
+    endContent: "",
+    errorMessage: "ml-1 mt-1",
+    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts
+    label: 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-["*"]',
+    outerWrapper: "place-content-center",
+    startContent: "",
+    thumb: "",
+    thumbIcon: "",
+    wrapper: ""
+  }
+});
 var Switch = ({
-  className,
+  className = void 0,
   disabled = false,
   label: _label = void 0,
   name,
@@ -30,6 +45,10 @@ var Switch = ({
     labelPlacement: "outside",
     placeholder: " "
   });
+  const variants = switchVariants();
+  const classNames = variantsToClassNames(variants, className, "outerWrapper");
+  console.log("getHelperWrapperProps()", getHelperWrapperProps());
+  console.log("getErrorMessageProps()", getErrorMessageProps());
   return /* @__PURE__ */ jsx(
     Controller,
     {
@@ -38,33 +57,36 @@ var Switch = ({
       disabled,
       render: ({
         field: { disabled: isDisabled, value, ref, onBlur, onChange }
-      }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      }) => /* @__PURE__ */ jsxs("div", { className: classNames.outerWrapper, children: [
         /* @__PURE__ */ jsxs(
           NextSwitch,
           {
             "aria-describedby": getInputProps()["aria-describedby"],
-            required,
-            isSelected: !!value,
-            className,
-            classNames: {
-              label: `text-bold block text-ellipsis text-small ${invalid ? "text-danger" : ""}`
-            },
+            classNames,
+            "data-invalid": invalid,
+            "data-required": required,
             "data-testid": testId,
             isDisabled,
-            value,
-            onChange,
-            onBlur,
+            isSelected: !!value,
             name,
+            onBlur,
+            onChange,
             ref,
+            required,
+            value,
             children: [
               label,
-              !!required && !!_label && /* @__PURE__ */ jsx("span", { className: "!text-danger", children: " *" }),
               /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
             ]
           }
         ),
-        error && // eslint-disable-next-line react/jsx-props-no-spreading
-        /* @__PURE__ */ jsx("div", { ...getHelperWrapperProps(), children: /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: /* @__PURE__ */ jsx(FieldValidationError_default, { error }) }) })
+        error && /* @__PURE__ */ jsx("div", { className: classNames.errorMessage, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...getErrorMessageProps(),
+            children: /* @__PURE__ */ jsx(FieldValidationError_default, { error })
+          }
+        ) })
       ] })
     }
   );
@@ -78,4 +100,4 @@ export {
   Switch_default,
   Switch_default2
 };
-//# sourceMappingURL=chunk-ZOVKQ7MN.js.map
+//# sourceMappingURL=chunk-PFX4YRWI.js.map

package/dist/chunk-PFX4YRWI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Switch/Switch.tsx","../src/Switch/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from 'react-hook-form';\n\nimport { useInput } from '@nextui-org/input';\nimport { Switch as NextSwitch } from '@nextui-org/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n  slots: {\n    base: '',\n    endContent: '',\n    errorMessage: 'ml-1 mt-1',\n    // See NextUI styles for group-data condition, e.g.: https://github.com/nextui-org/nextui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n    outerWrapper: 'place-content-center',\n    startContent: '',\n    thumb: '',\n    thumbIcon: '',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** whether the select should be disabled */\n  disabled?: boolean;\n  /** component displayed next to the switch. */\n  label?: React.ReactNode;\n  /** name the field is registered under */\n  name: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n *  Switch component based on [NextUI Switch](https://nextui.org/docs/components/switch)\n */\nconst Switch = ({\n  className = undefined,\n  disabled = false,\n  label: _label = undefined,\n  name,\n  testId: _testId = undefined,\n}: SwitchProps) => {\n  const { control, getFieldState } = useFormContext();\n  const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n  const { label, getInputProps, getHelperWrapperProps, getErrorMessageProps } =\n    useInput({\n      errorMessage: JSON.stringify(error),\n      isInvalid: invalid,\n      isRequired: required,\n      label: _label,\n      labelPlacement: 'outside',\n      placeholder: ' ',\n    });\n\n  const variants = switchVariants();\n  const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n  console.log('getHelperWrapperProps()', getHelperWrapperProps());\n  console.log('getErrorMessageProps()', getErrorMessageProps());\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      disabled={disabled}\n      render={({\n        field: { disabled: isDisabled, value, ref, onBlur, onChange },\n      }) => (\n        <div className={classNames.outerWrapper}>\n          <NextSwitch\n            aria-describedby={getInputProps()['aria-describedby']}\n            classNames={classNames}\n            // See NextUI styles for group-data condition (data-invalid), e.g.: https://github.com/nextui-org/nextui/blob/main/packages/components/select/src/use-select.ts\n            data-invalid={invalid}\n            data-required={required}\n            data-testid={testId}\n            isDisabled={isDisabled}\n            isSelected={!!value}\n            name={name}\n            onBlur={onBlur}\n            onChange={onChange}\n            ref={ref}\n            required={required}\n            value={value}\n          >\n            {label}\n            <FieldCopyTestIdButton testId={testId} />\n          </NextSwitch>\n          {error && (\n            <div className={classNames.errorMessage}>\n              <div\n                /* eslint-disable-next-line react/jsx-props-no-spreading */\n                {...getErrorMessageProps()}\n              >\n                <FieldValidationError error={error} />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    />\n  );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,gBAAgB;AACzB,SAAS,UAAU,kBAAkB;AAErC,SAAS,IAAI,4BAA4B;AA4E/B,SAiBE,KAjBF;AAtEH,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,cAAc;AAAA;AAAA,IAEd,OACE;AAAA,IACF,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AAqBD,IAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,OAAO,SAAS;AAAA,EAChB;AAAA,EACA,QAAQ,UAAU;AACpB,MAAmB;AACjB,QAAM,EAAE,SAAS,cAAc,IAAI,eAAe;AAClD,QAAM,EAAE,OAAO,UAAU,QAAQ,QAAQ,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,OAAO,eAAe,uBAAuB,qBAAqB,IACxE,SAAS;AAAA,IACP,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf,CAAC;AAEH,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,cAAc;AAE3E,UAAQ,IAAI,2BAA2B,sBAAsB,CAAC;AAC9D,UAAQ,IAAI,0BAA0B,qBAAqB,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,QACP,OAAO,EAAE,UAAU,YAAY,OAAO,KAAK,QAAQ,SAAS;AAAA,MAC9D,MACE,qBAAC,SAAI,WAAW,WAAW,cACzB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,oBAAkB,cAAc,EAAE,kBAAkB;AAAA,YACpD;AAAA,YAEA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb;AAAA,YACA,YAAY,CAAC,CAAC;AAAA,YACd;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,cACD,oBAAC,iCAAsB,QAAgB;AAAA;AAAA;AAAA,QACzC;AAAA,QACC,SACC,oBAAC,SAAI,WAAW,WAAW,cACzB;AAAA,UAAC;AAAA;AAAA,YAEE,GAAG,qBAAqB;AAAA,YAEzB,8BAAC,gCAAqB,OAAc;AAAA;AAAA,QACtC,GACF;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,iBAAQ;;;AChHf,IAAOA,kBAAQ;","names":["Switch_default"]}

package/dist/{chunk-DTSX7YON.js → chunk-SCTH3FAO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-T3CCNJHK.js";
 import {
   FieldValidationError_default
-} from "./chunk-DBLODROX.js";
+} from "./chunk-WKM2D7LF.js";
 import {
   useFormContext
 } from "./chunk-HWDQZO7X.js";
@@ -78,4 +78,4 @@ export {
   Input_default,
   Input_default2
 };
-//# sourceMappingURL=chunk-DTSX7YON.js.map
+//# sourceMappingURL=chunk-SCTH3FAO.js.map

package/dist/{chunk-DBLODROX.js → chunk-WKM2D7LF.js}

@@ -5,20 +5,21 @@ import {
 // src/partials/FieldValidationError/FieldValidationError.tsx
 import { jsx } from "react/jsx-runtime";
 var FieldValidationError = ({
+  className = void 0,
   error,
   testId = void 0
 }) => {
   if (!error) {
     return null;
   }
-  let tmp_errors = [];
+  let tmpErrors = [];
   if (typeof error === "object" && !(error instanceof Array)) {
-    const error_object = error;
+    const errorObject = error;
     Object.keys(error).forEach((key) => {
-      tmp_errors = [...tmp_errors, ...error_object[key]];
+      tmpErrors = [...tmpErrors, ...errorObject[key]];
     });
   }
-  const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
+  const errorArray = JSON.stringify(tmpErrors) !== "[]" ? tmpErrors : error;
   const errorStrings = errorArray.map((e) => e.message);
   const ariaString = `Error: ${errorStrings.join("\n")}`;
   return /* @__PURE__ */ jsx(
@@ -26,6 +27,7 @@ var FieldValidationError = ({
     {
       "data-testid": slugify(testId || errorStrings.join()),
       "aria-label": ariaString,
+      className,
       children: errorStrings.map((errorString, i) => (
         // eslint-disable-next-line react/no-array-index-key
         /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: errorString }) }, `error_${i}`)
@@ -42,4 +44,4 @@ export {
   FieldValidationError_default,
   FieldValidationError_default2
 };
-//# sourceMappingURL=chunk-DBLODROX.js.map
+//# sourceMappingURL=chunk-WKM2D7LF.js.map

package/dist/chunk-WKM2D7LF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n  className?: string;\n  error: FieldError[] | Record<string, FieldError[]>;\n  testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error,\n  testId = undefined,\n}: FieldValidationErrorProps) => {\n  if (!error) {\n    return null;\n  }\n\n  let tmpErrors: FieldError[] = [];\n\n  if (typeof error === 'object' && !(error instanceof Array)) {\n    const errorObject = error as Record<string, FieldError[]>;\n    Object.keys(error).forEach((key) => {\n      tmpErrors = [...tmpErrors, ...errorObject[key]];\n    });\n  }\n\n  const errorArray: FieldError[] =\n    JSON.stringify(tmpErrors) !== '[]' ? tmpErrors : (error as FieldError[]);\n  const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n  const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n  return (\n    <ul\n      data-testid={slugify(testId || errorStrings.join())}\n      aria-label={ariaString} // TODO: ist das richtig @Hannes?\n      className={className}\n    >\n      {errorStrings.map((errorString: string, i: number) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={`error_${i}`}>\n          <div>{errorString}</div>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;AA6CU;AAhCV,IAAM,uBAAuB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA,SAAS;AACX,MAAiC;AAC/B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,YAA0B,CAAC;AAE/B,MAAI,OAAO,UAAU,YAAY,EAAE,iBAAiB,QAAQ;AAC1D,UAAM,cAAc;AACpB,WAAO,KAAK,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAClC,kBAAY,CAAC,GAAG,WAAW,GAAG,YAAY,GAAG,CAAC;AAAA,IAChD,CAAC;AAAA,EACH;AAEA,QAAM,aACJ,KAAK,UAAU,SAAS,MAAM,OAAO,YAAa;AACpD,QAAM,eAAyB,WAAW,IAAI,CAAC,MAAM,EAAE,OAAO;AAC9D,QAAM,aAAa,UAAU,aAAa,KAAK,IAAI,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,QAAQ,UAAU,aAAa,KAAK,CAAC;AAAA,MAClD,cAAY;AAAA,MACZ;AAAA,MAEC,uBAAa,IAAI,CAAC,aAAqB;AAAA;AAAA,QAEtC,oBAAC,QACC,8BAAC,SAAK,uBAAY,KADX,SAAS,CAAC,EAEnB;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;AC9Cf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}