@ultraviolet/form 4.0.0-beta.1 → 4.0.0-beta.11

package/dist/components/SelectInputField/index.cjs

@@ -6,71 +6,19 @@ const ui = require("@ultraviolet/ui");
 const react = require("react");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
-const identity = (x) => x;
 const SelectInputField = ({
-  animation,
-  animationDuration,
-  animationOnChange,
-  children,
-  className,
-  disabled,
-  // error: errorProp,
-  format: formatProp = identity,
-  // formatOnBlur,
-  id,
-  inputId,
-  isClearable,
-  isLoading,
-  isSearchable,
   label = "",
-  maxLength,
-  menuPortalTarget,
-  minLength,
-  multiple,
-  name,
   onBlur,
-  onChange,
-  onFocus,
-  options: optionsProp,
-  parse: parseProp = identity,
-  placeholder,
-  readOnly,
   required,
-  noTopLabel,
-  emptyState,
-  customStyle,
+  name,
+  "aria-label": ariaLabel,
   shouldUnregister = false,
-  "data-testid": dataTestId,
-  validate
+  control,
+  validate,
+  onChange,
+  multiselect,
+  ...props
 }) => {
-  const options = react.useMemo(() => optionsProp || react.Children.toArray(children).flat().filter(Boolean).map(({
-    props: {
-      children: labelChild,
-      ...option
-    }
-  }) => ({
-    ...option,
-    label: labelChild
-  })), [optionsProp, children]);
-  const parse = react.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = react.useCallback((val) => {
-    if (multiple) return formatProp(val, name);
-    const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
-    let selected = "";
-    if (val && options) {
-      selected = find(options, val);
-      if (!selected) {
-        selected = options.map((curr) => find(curr.options, val)).filter(identity);
-        if (Array.isArray(selected) && selected.length === 0) {
-          selected = "";
-        }
-      }
-    }
-    return formatProp(selected, name);
-  }, [formatProp, multiple, name, options]);
-  const {
-    getError
-  } = index.useErrors();
   const {
     field,
     fieldState: {
@@ -78,25 +26,25 @@ const SelectInputField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      minLength: minLength || required ? 1 : void 0,
-      maxLength,
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({
-    label,
-    minLength,
-    maxLength
-  }, error), id, inputId, isClearable, isLoading, isMulti: multiple, customStyle, isSearchable, menuPortalTarget, onBlur: (event) => {
+  const {
+    getError
+  } = index.useErrors();
+  const handleChange = react.useCallback((value) => {
+    onChange?.(value);
+    field.onChange(value);
+  }, [onChange, field]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, multiselect, required, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event, action) => {
-    field.onChange(parse(event));
-    onChange?.(event, action);
-  }, onFocus, options, placeholder, readOnly, noTopLabel, required, value: format(field.value), emptyState, "data-testid": dataTestId, children });
+  }, value: field.value, error: getError({
+    label: label ?? ariaLabel ?? name
+  }, error), label, "aria-label": ariaLabel, onChange: handleChange, ...props });
 };
-SelectInputField.Option = ui.SelectInput.Option;
 exports.SelectInputField = SelectInputField;

package/dist/components/SelectInputField/index.d.ts

@@ -1,85 +1,7 @@
-import type { CSSObject, Theme, css } from '@emotion/react';
 import { SelectInput } from '@ultraviolet/ui';
-import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+import { type ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
-import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select';
-import type Select from 'react-select';
 import type { BaseFieldProps } from '../../types';
-export type SelectInputType = typeof SelectInput;
-type SelectOption = {
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-    description?: string;
-    inlineDescription?: string;
-};
-type WithSelectProps = {
-    selectProps: SelectProps;
-};
-type SelectStyleProps = {
-    error?: string;
-    /**
-     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
-     */
-    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
-    animation?: string;
-    /**
-     * Time of the animation
-     */
-    animationDuration?: number;
-    /**
-     * Show/hide the label inside the component
-     */
-    noTopLabel?: boolean;
-    theme: Theme;
-};
-type StyledContainerProps = {
-    isDisabled?: boolean;
-    additionalStyles?: Parameters<typeof css>[0];
-};
-type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
-    value?: string | SelectOption;
-    checked?: boolean;
-    error?: string;
-    labelId?: string;
-    required?: boolean;
-    time?: boolean;
-};
-type StateManagedSelect = typeof Select;
-type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
-    /**
-     * Name of the animation
-     */
-    animation?: string;
-    /**
-     * Play the animation when the value change
-     */
-    animationOnChange?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    innerRef?: ForwardedRef<StateManagedSelect>;
-    /**
-     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
-     */
-    customComponents?: SelectProps['components'];
-    children: ReactNode;
-    emptyState?: ComponentProps<Select>['noOptionsMessage'];
-}>;
-/**
- * @deprecated This component is deprecated, please use `SelectInputFieldV2` instead
- */
-export type SelectInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
-    multiple?: boolean;
-    parse?: (value: unknown, name?: string) => unknown;
-    format?: (value: unknown, name: string) => unknown;
-    maxLength?: number;
-    minLength?: number;
-};
-/**
- * @deprecated use SelectInputFieldV2 component instead
- */
-export declare const SelectInputField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, noTopLabel, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, validate, }: SelectInputFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
-    Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
-};
+type SelectInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectInput>, 'value' | 'onChange'>;
+export declare const SelectInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, onBlur, required, name, "aria-label": ariaLabel, shouldUnregister, control, validate, onChange, multiselect, ...props }: SelectInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectInputField/index.js

@@ -1,74 +1,22 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { SelectInput } from "@ultraviolet/ui";
-import { useMemo, Children, useCallback } from "react";
+import { useCallback } from "react";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
-const identity = (x) => x;
 const SelectInputField = ({
-  animation,
-  animationDuration,
-  animationOnChange,
-  children,
-  className,
-  disabled,
-  // error: errorProp,
-  format: formatProp = identity,
-  // formatOnBlur,
-  id,
-  inputId,
-  isClearable,
-  isLoading,
-  isSearchable,
   label = "",
-  maxLength,
-  menuPortalTarget,
-  minLength,
-  multiple,
-  name,
   onBlur,
-  onChange,
-  onFocus,
-  options: optionsProp,
-  parse: parseProp = identity,
-  placeholder,
-  readOnly,
   required,
-  noTopLabel,
-  emptyState,
-  customStyle,
+  name,
+  "aria-label": ariaLabel,
   shouldUnregister = false,
-  "data-testid": dataTestId,
-  validate
+  control,
+  validate,
+  onChange,
+  multiselect,
+  ...props
 }) => {
-  const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
-    props: {
-      children: labelChild,
-      ...option
-    }
-  }) => ({
-    ...option,
-    label: labelChild
-  })), [optionsProp, children]);
-  const parse = useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = useCallback((val) => {
-    if (multiple) return formatProp(val, name);
-    const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
-    let selected = "";
-    if (val && options) {
-      selected = find(options, val);
-      if (!selected) {
-        selected = options.map((curr) => find(curr.options, val)).filter(identity);
-        if (Array.isArray(selected) && selected.length === 0) {
-          selected = "";
-        }
-      }
-    }
-    return formatProp(selected, name);
-  }, [formatProp, multiple, name, options]);
-  const {
-    getError
-  } = useErrors();
   const {
     field,
     fieldState: {
@@ -76,27 +24,27 @@ const SelectInputField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      minLength: minLength || required ? 1 : void 0,
-      maxLength,
       validate
     }
   });
-  return /* @__PURE__ */ jsx(SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({
-    label,
-    minLength,
-    maxLength
-  }, error), id, inputId, isClearable, isLoading, isMulti: multiple, customStyle, isSearchable, menuPortalTarget, onBlur: (event) => {
+  const {
+    getError
+  } = useErrors();
+  const handleChange = useCallback((value) => {
+    onChange?.(value);
+    field.onChange(value);
+  }, [onChange, field]);
+  return /* @__PURE__ */ jsx(SelectInput, { name: field.name, multiselect, required, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event, action) => {
-    field.onChange(parse(event));
-    onChange?.(event, action);
-  }, onFocus, options, placeholder, readOnly, noTopLabel, required, value: format(field.value), emptyState, "data-testid": dataTestId, children });
+  }, value: field.value, error: getError({
+    label: label ?? ariaLabel ?? name
+  }, error), label, "aria-label": ariaLabel, onChange: handleChange, ...props });
 };
-SelectInputField.Option = SelectInput.Option;
 export {
   SelectInputField
 };

package/dist/components/SelectableCardField/index.cjs

@@ -9,23 +9,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -42,7 +36,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -50,7 +44,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -67,6 +61,6 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 exports.SelectableCardField = SelectableCardField;

package/dist/components/SelectableCardField/index.d.ts

@@ -1,15 +1,7 @@
 import { SelectableCard } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
-import type { BaseFieldProps, LabelProp } from '../../types';
-type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'data-testid'>> & {
-    className?: string;
-} & ({
-    illustration?: ComponentProps<typeof SelectableCard>['illustration'];
-    productIcon?: never;
-} | {
-    productIcon?: ComponentProps<typeof SelectableCard>['productIcon'];
-    illustration?: never;
-}) & LabelProp;
-export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, shouldUnregister, validate, productIcon, illustration, "data-testid": dataTestId, "aria-label": ariaLabel, }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import type { BaseFieldProps } from '../../types';
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof SelectableCard>, 'name' | 'onChange' | 'value'>;
+export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, type, onFocus, onBlur, required, label, shouldUnregister, validate, productIcon, illustration, "aria-label": ariaLabel, ...props }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardField/index.js

@@ -7,23 +7,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -40,7 +34,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsx(SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsx(SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -48,7 +42,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -65,7 +59,7 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 export {
   SelectableCardField

package/dist/components/SelectableCardGroupField/index.cjs

@@ -6,21 +6,17 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardGroupField = ({
-  className,
-  legend,
+  legend = "",
   control,
   name,
   onChange,
   required = false,
-  children,
-  label = "",
   error: customError,
-  helper,
   columns = 1,
-  showTick,
   type = "radio",
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -39,7 +35,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -52,8 +48,8 @@ const SelectableCardGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, className, columns, helper, required, children });
+    label: legend
+  }, error) ?? customError, columns, required });
 };
 SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;
 exports.SelectableCardGroupField = SelectableCardGroupField;

package/dist/components/SelectableCardGroupField/index.d.ts

@@ -2,9 +2,9 @@ import { SelectableCardGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof SelectableCardGroup>, 'name' | 'onChange' | 'value'>;
 export declare const SelectableCardGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, control, name, onChange, required, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, validate, }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, onChange, required, error: customError, columns, type, shouldUnregister, validate, ...props }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SelectableCardGroupField/index.js

@@ -4,21 +4,17 @@ import { SelectableCardGroup } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
-  className,
-  legend,
+  legend = "",
   control,
   name,
   onChange,
   required = false,
-  children,
-  label = "",
   error: customError,
-  helper,
   columns = 1,
-  showTick,
   type = "radio",
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -37,7 +33,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -50,8 +46,8 @@ const SelectableCardGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, className, columns, helper, required, children });
+    label: legend
+  }, error) ?? customError, columns, required });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
 export {

package/dist/components/SelectableCardOptionGroupField/index.cjs

@@ -6,7 +6,7 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardOptionGroupField = ({
-  legend,
+  legend = "",
   control,
   name,
   optionName,
@@ -14,7 +14,6 @@ const SelectableCardOptionGroupField = ({
   onChangeOption,
   required = false,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
@@ -53,7 +52,7 @@ const SelectableCardOptionGroupField = ({
     optionField.onChange(value);
     onChangeOption?.(value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, required, ...props, children });
 };
 SelectableCardOptionGroupField.Option = ui.SelectableCardOptionGroup.Option;

package/dist/components/SelectableCardOptionGroupField/index.d.ts

@@ -2,18 +2,18 @@ import { SelectableCardOptionGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<ComponentProps<typeof SelectableCardOptionGroup>, 'onChange' | 'onChangeOption'> & Partial<Pick<ComponentProps<typeof SelectableCardOptionGroup>, 'onChangeOption' | 'onChange'>> & BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & {
+type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<ComponentProps<typeof SelectableCardOptionGroup>, 'onChange' | 'onChangeOption'> & Partial<Pick<ComponentProps<typeof SelectableCardOptionGroup>, 'onChangeOption' | 'onChange'>> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & {
     optionName?: string;
 };
 export declare const SelectableCardOptionGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, optionName, onChange, onChangeOption, required, children, label, error: customError, shouldUnregister, validate, ...props }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, optionName, onChange, onChangeOption, required, children, error: customError, shouldUnregister, validate, ...props }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, }: Omit<import("node_modules/@ultraviolet/ui/dist/components/SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
         value: string;
         className?: string;
         children?: import("react").ReactNode;
-        options: ComponentProps<typeof import("@ultraviolet/ui").SelectInputV2>["options"];
-        optionValue?: ComponentProps<typeof import("@ultraviolet/ui").SelectInputV2>["value"];
-        optionPlaceholder?: ComponentProps<typeof import("@ultraviolet/ui").SelectInputV2>["placeholder"];
+        options: ComponentProps<typeof import("@ultraviolet/ui").SelectInput>["options"];
+        optionValue?: ComponentProps<typeof import("@ultraviolet/ui").SelectInput>["value"];
+        optionPlaceholder?: ComponentProps<typeof import("@ultraviolet/ui").SelectInput>["placeholder"];
         image?: import("react").ReactNode;
         labelDescription?: ComponentProps<typeof import("@ultraviolet/ui").Label>["labelDescription"];
         id?: string;

package/dist/components/SelectableCardOptionGroupField/index.js

@@ -4,7 +4,7 @@ import { SelectableCardOptionGroup } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardOptionGroupField = ({
-  legend,
+  legend = "",
   control,
   name,
   optionName,
@@ -12,7 +12,6 @@ const SelectableCardOptionGroupField = ({
   onChangeOption,
   required = false,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
@@ -51,7 +50,7 @@ const SelectableCardOptionGroupField = ({
     optionField.onChange(value);
     onChangeOption?.(value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, required, ...props, children });
 };
 SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option;

package/dist/components/SwitchButtonField/index.cjs

@@ -6,8 +6,6 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const SwitchButtonField = ({
   name,
-  leftButton,
-  rightButton,
   size,
   control,
   shouldUnregister,
@@ -25,7 +23,7 @@ const SwitchButtonField = ({
     shouldUnregister,
     control
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SwitchButton, { ...props, name, leftButton, rightButton, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SwitchButton, { ...props, name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target);
   }, value: field.value, tooltip, size, className, onFocus, onBlur: (event) => {
@@ -33,4 +31,5 @@ const SwitchButtonField = ({
     onBlur?.(event);
   } });
 };
+SwitchButtonField.Option = ui.SwitchButton.Option;
 exports.SwitchButtonField = SwitchButtonField;