@ultraviolet/form 3.3.1 → 3.5.0

package/dist/components/CheckboxField/index.cjs

@@ -5,24 +5,18 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const CheckboxField = ({
-  id,
   control,
   name,
   label,
-  size,
-  progress,
   disabled,
   required,
-  className,
   children,
   onChange,
   onBlur,
-  onFocus,
-  helper,
-  tooltip,
   "data-testid": dataTestId,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -42,14 +36,14 @@ const CheckboxField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { ...props, name: field.name, onChange: (event) => {
     field.onChange(event.target.checked);
     onChange?.(event.target.checked);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, size, progress, disabled: field.disabled, checked: !!field.value, error: getError({
+  }, disabled: field.disabled, checked: !!field.value, error: getError({
     label: label ?? ""
-  }, error), ref: field.ref, className, required, "data-testid": dataTestId, helper, tooltip, children });
+  }, error), ref: field.ref, children });
 };
 exports.CheckboxField = CheckboxField;

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

@@ -2,9 +2,9 @@ import { Checkbox } from '@ultraviolet/ui';
 import type { ComponentProps, ReactNode } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
+type CheckboxFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'value'> & Omit<ComponentProps<typeof Checkbox>, 'value' | 'onChange' | 'aria-label'> & {
     className?: string;
     children?: ReactNode;
 };
-export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, control, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, helper, tooltip, "data-testid": dataTestId, shouldUnregister, validate, }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, disabled, required, children, onChange, onBlur, "data-testid": dataTestId, shouldUnregister, validate, ...props }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxField/index.js

@@ -3,24 +3,18 @@ import { Checkbox } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const CheckboxField = ({
-  id,
   control,
   name,
   label,
-  size,
-  progress,
   disabled,
   required,
-  className,
   children,
   onChange,
   onBlur,
-  onFocus,
-  helper,
-  tooltip,
   "data-testid": dataTestId,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -40,15 +34,15 @@ const CheckboxField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(Checkbox, { id, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsx(Checkbox, { ...props, name: field.name, onChange: (event) => {
     field.onChange(event.target.checked);
     onChange?.(event.target.checked);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, size, progress, disabled: field.disabled, checked: !!field.value, error: getError({
+  }, disabled: field.disabled, checked: !!field.value, error: getError({
     label: label ?? ""
-  }, error), ref: field.ref, className, required, "data-testid": dataTestId, helper, tooltip, children });
+  }, error), ref: field.ref, children });
 };
 export {
   CheckboxField

package/dist/components/CheckboxGroupField/index.cjs

@@ -12,11 +12,7 @@ const arraysContainSameValues = (array1, array2) => {
   return array2.every((value) => array1.includes(value));
 };
 const CheckboxGroupField = ({
-  legend,
-  className,
   control,
-  helper,
-  direction,
   children,
   onChange,
   label = "",
@@ -24,7 +20,8 @@ const CheckboxGroupField = ({
   name,
   required = false,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -63,7 +60,7 @@ const CheckboxGroupField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.CheckboxGroup, { ...props, value: field.value, onChange: (event) => {
     const fieldValue = field.value;
     if (fieldValue?.includes(event.currentTarget.value)) {
       field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
@@ -73,7 +70,7 @@ const CheckboxGroupField = ({
     onChange?.(event.currentTarget.value);
   }, error: getError({
     label
-  }, error) ?? customError, className, direction, helper, required, children });
+  }, error) ?? customError, name, children });
 };
 CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;
 exports.CheckboxGroupField = CheckboxGroupField;

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

@@ -2,9 +2,9 @@ import { CheckboxGroup } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
 export declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, control, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, validate, }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, label, error: customError, name, required, shouldUnregister, validate, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
         error?: string | import("react").ReactNode;
         size?: number;

package/dist/components/CheckboxGroupField/index.js

@@ -10,11 +10,7 @@ const arraysContainSameValues = (array1, array2) => {
   return array2.every((value) => array1.includes(value));
 };
 const CheckboxGroupField = ({
-  legend,
-  className,
   control,
-  helper,
-  direction,
   children,
   onChange,
   label = "",
@@ -22,7 +18,8 @@ const CheckboxGroupField = ({
   name,
   required = false,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -61,7 +58,7 @@ const CheckboxGroupField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsx(CheckboxGroup, { ...props, value: field.value, onChange: (event) => {
     const fieldValue = field.value;
     if (fieldValue?.includes(event.currentTarget.value)) {
       field.onChange(fieldValue?.filter((currentValue) => currentValue !== event.currentTarget.value));
@@ -71,7 +68,7 @@ const CheckboxGroupField = ({
     onChange?.(event.currentTarget.value);
   }, error: getError({
     label
-  }, error) ?? customError, className, direction, helper, required, children });
+  }, error) ?? customError, name, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
 export {

package/dist/components/RadioField/index.cjs

@@ -5,11 +5,9 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const RadioField = ({
-  className,
   control,
   "data-testid": dataTestId,
   disabled,
-  id,
   name,
   onBlur,
   label = "",
@@ -17,9 +15,9 @@ const RadioField = ({
   onFocus,
   required,
   value,
-  tooltip,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -38,14 +36,14 @@ const RadioField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { ...props, name: field.name, checked: field.value === value, "data-testid": dataTestId, disabled, error: getError({
     label: typeof label === "string" ? label : ""
-  }, error), id, onChange: () => {
+  }, error), onChange: () => {
     field.onChange(value);
     onChange?.(value);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, required, value: value ?? "", label, tooltip });
+  }, onFocus, required, value: value ?? "", label });
 };
 exports.RadioField = RadioField;

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

@@ -2,11 +2,9 @@ import { Radio } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
-    className?: string;
-};
+type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange' | 'aria-label'>;
 /**
  * @deprecated This component is deprecated, use `RadioGroupField` instead.
  */
-export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, control, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, tooltip, shouldUnregister, validate, }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, "data-testid": dataTestId, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioField/index.js

@@ -3,11 +3,9 @@ import { Radio } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioField = ({
-  className,
   control,
   "data-testid": dataTestId,
   disabled,
-  id,
   name,
   onBlur,
   label = "",
@@ -15,9 +13,9 @@ const RadioField = ({
   onFocus,
   required,
   value,
-  tooltip,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -36,15 +34,15 @@ const RadioField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({
+  return /* @__PURE__ */ jsx(Radio, { ...props, name: field.name, checked: field.value === value, "data-testid": dataTestId, disabled, error: getError({
     label: typeof label === "string" ? label : ""
-  }, error), id, onChange: () => {
+  }, error), onChange: () => {
     field.onChange(value);
     onChange?.(value);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, required, value: value ?? "", label, tooltip });
+  }, onFocus, required, value: value ?? "", label });
 };
 export {
   RadioField

package/dist/components/RadioGroupField/index.cjs

@@ -5,19 +5,17 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const RadioGroupField = ({
-  className,
   control,
-  legend = "",
   name,
   onChange,
   required,
   children,
   label = "",
   error: customError,
-  helper,
-  direction,
   shouldUnregister = false,
-  validate
+  validate,
+  legend,
+  ...props
 }) => {
   const {
     getError
@@ -36,12 +34,12 @@ const RadioGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { className, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, legend, error: getError({
+  }, required, value: field.value, error: getError({
     label
-  }, error) ?? customError, helper, direction, children });
+  }, error) ?? customError, legend: legend ?? "", children });
 };
 RadioGroupField.Radio = ui.RadioGroup.Radio;
 exports.RadioGroupField = RadioGroupField;

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

@@ -2,11 +2,9 @@ import { RadioGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
-    className?: string;
-};
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
 export declare const RadioGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, control, legend, name, onChange, required, children, label, error: customError, helper, direction, shouldUnregister, validate, }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, label, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, }: Omit<({
         error?: import("react").ReactNode;
         checked?: boolean;

package/dist/components/RadioGroupField/index.js

@@ -3,19 +3,17 @@ import { RadioGroup } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioGroupField = ({
-  className,
   control,
-  legend = "",
   name,
   onChange,
   required,
   children,
   label = "",
   error: customError,
-  helper,
-  direction,
   shouldUnregister = false,
-  validate
+  validate,
+  legend,
+  ...props
 }) => {
   const {
     getError
@@ -34,12 +32,12 @@ const RadioGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(RadioGroup, { className, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsx(RadioGroup, { ...props, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, legend, error: getError({
+  }, required, value: field.value, error: getError({
     label
-  }, error) ?? customError, helper, direction, children });
+  }, error) ?? customError, legend: legend ?? "", children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;
 export {

package/dist/components/SliderField/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
+const react = require("react");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SliderField = ({
@@ -17,6 +18,7 @@ const SliderField = ({
   label,
   value,
   defaultValue,
+  options,
   ...props
 }) => {
   const {
@@ -38,16 +40,35 @@ const SliderField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: field.value, onBlur: (event) => {
+  const finalValue = react.useMemo(() => {
+    if (options && field.value) {
+      if (!Array.isArray(field.value)) {
+        const processedValue = options.map((option) => option.value).indexOf(field.value);
+        return processedValue;
+      }
+      if (Array.isArray(field.value)) {
+        const processedValue = field.value.map((val) => options.map((option) => option.value).indexOf(val));
+        return processedValue;
+      }
+    }
+    return field.value;
+  }, [field.value, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: finalValue, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
-    field.onChange(newValue);
-    onChange?.(newValue);
+    if (options) {
+      const processedValue = !Array.isArray(newValue) ? options[newValue].value : newValue.map((val) => val ? options[val].value : options[0].value);
+      field.onChange(processedValue);
+      onChange?.(processedValue);
+    } else {
+      field.onChange(newValue);
+      onChange?.(newValue);
+    }
   }, max, min, error: getError({
     label: label ?? "",
     max,
     min
-  }, error), label, required, ...props });
+  }, error), label, required, options, ...props });
 };
 exports.SliderField = SliderField;

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

@@ -1,9 +1,9 @@
 import { Slider } from '@ultraviolet/ui';
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {
     suffix?: string | ReactNode[];
 };
-export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SliderField/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Slider } from "@ultraviolet/ui";
+import { useMemo } from "react";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SliderField = ({
@@ -15,6 +16,7 @@ const SliderField = ({
   label,
   value,
   defaultValue,
+  options,
   ...props
 }) => {
   const {
@@ -36,17 +38,36 @@ const SliderField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: field.value, onBlur: (event) => {
+  const finalValue = useMemo(() => {
+    if (options && field.value) {
+      if (!Array.isArray(field.value)) {
+        const processedValue = options.map((option) => option.value).indexOf(field.value);
+        return processedValue;
+      }
+      if (Array.isArray(field.value)) {
+        const processedValue = field.value.map((val) => options.map((option) => option.value).indexOf(val));
+        return processedValue;
+      }
+    }
+    return field.value;
+  }, [field.value, options]);
+  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: finalValue, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
-    field.onChange(newValue);
-    onChange?.(newValue);
+    if (options) {
+      const processedValue = !Array.isArray(newValue) ? options[newValue].value : newValue.map((val) => val ? options[val].value : options[0].value);
+      field.onChange(processedValue);
+      onChange?.(processedValue);
+    } else {
+      field.onChange(newValue);
+      onChange?.(newValue);
+    }
   }, max, min, error: getError({
     label: label ?? "",
     max,
     min
-  }, error), label, required, ...props });
+  }, error), label, required, options, ...props });
 };
 export {
   SliderField

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.3.1",
+  "version": "3.5.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -72,7 +72,7 @@
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.52.1",
-    "@ultraviolet/ui": "1.62.0",
+    "@ultraviolet/ui": "1.64.0",
     "@ultraviolet/themes": "1.12.2"
   },
   "scripts": {