@ultraviolet/ui 3.0.0-beta.23 → 3.0.0-beta.25

package/dist/components/TimeInput/index.cjs

@@ -29,6 +29,7 @@ const TimeInput = ({
   className,
   id,
   autoFocus,
+  style,
   "data-testid": dataTestId,
   placeholder = constants.DEFAULT_PLACEHOLDER,
   "aria-label": ariaLabel
@@ -169,7 +170,7 @@ const TimeInput = ({
       refMinutes.current?.focus();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className, gap: 0.5, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className, gap: 0.5, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", "aria-label": ariaLabel, "aria-required": required, className: styles_css.timeinputWrapper({
       disabled,

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

@@ -1,4 +1,4 @@
-import type { FocusEvent, ReactNode } from 'react';
+import type { CSSProperties, FocusEvent, ReactNode } from 'react';
 export type Time = {
     h: string;
     m: string;
@@ -27,6 +27,7 @@ type TimeInputProps = {
      * Automatically focus on the element on render. Autofocus is applied to the hour input
      */
     autoFocus?: boolean;
+    style?: CSSProperties;
 } & ({
     label?: string;
     'aria-label'?: never;
@@ -38,5 +39,5 @@ type TimeInputProps = {
  * A time input component that allows users to type a time in a 24 or 12-hour format.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TimeInput/index.js

@@ -27,6 +27,7 @@ const TimeInput = ({
   className,
   id,
   autoFocus,
+  style,
   "data-testid": dataTestId,
   placeholder = DEFAULT_PLACEHOLDER,
   "aria-label": ariaLabel
@@ -167,7 +168,7 @@ const TimeInput = ({
       refMinutes.current?.focus();
     }
   };
-  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, children: [
+  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
     /* @__PURE__ */ jsxs(Stack, { alignItems: "center", "aria-label": ariaLabel, "aria-required": required, className: timeinputWrapper({
       disabled,

package/dist/components/Toaster/components/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Button } from '../../Button';
-export declare const ToastButton: ({ variant, ...props }: ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastButton: ({ variant, className, ...props }: ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/index.cjs

@@ -40,7 +40,8 @@ const ToastContainer = ({
   "data-testid": dataTestId,
   className,
   autoClose,
-  containerId = "toaster"
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${styles_css.toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, transition: reactToastify.Slide });
+  containerId = "toaster",
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${styles_css.toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: reactToastify.Slide });
 exports.ToastContainer = ToastContainer;
 exports.toast = toast;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { ToastOptions } from 'react-toastify';
 import { Button } from '../Button';
 export declare const toast: {
@@ -30,6 +30,7 @@ type ToastContainerProps = {
      * Set a custom containerId to be able to define multiple ToastContainers
      */
     containerId?: string;
+    style?: CSSProperties;
 };
 /**
  * Display short information about an event that happen in the interface in a floating alert.
@@ -39,9 +40,9 @@ type ToastContainerProps = {
  * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
  * and second the `toast()` function which is used to display the toast.
  */
-export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Toast: {
-    Button: ({ variant, ...props }: import("react").ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
     Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Toaster/index.js

@@ -38,8 +38,9 @@ const ToastContainer = ({
   "data-testid": dataTestId,
   className,
   autoClose,
-  containerId = "toaster"
-}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, transition: Slide });
+  containerId = "toaster",
+  style
+}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: Slide });
 export {
   ToastContainer,
   toast

package/dist/components/Toaster/styles.css.d.ts

@@ -1,2 +1,3 @@
 export declare const toaster: string;
 export declare const closeButtonToaster: string;
+export declare const toasterButton: string;

package/dist/components/Toggle/index.cjs

@@ -24,7 +24,8 @@ const Toggle = react.forwardRef(({
   "data-testid": dataTestId,
   value,
   error,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const uniqueId = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${styles_css.label({
@@ -43,7 +44,7 @@ const Toggle = react.forwardRef(({
       disabled,
       error: !!error,
       size
-    }), children: /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: styles_css.checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, type: "checkbox", value }) })
+    }), children: /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: styles_css.checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, style, type: "checkbox", value }) })
   ] }) });
 });
 exports.Toggle = Toggle;

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

@@ -15,4 +15,4 @@ export declare const Toggle: import("react").ForwardRefExoticComponent<{
     required?: boolean;
     error?: boolean | string;
     'data-testid'?: string;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "value"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Toggle/index.js

@@ -22,7 +22,8 @@ const Toggle = forwardRef(({
   "data-testid": dataTestId,
   value,
   error,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const uniqueId = useId();
   return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("label", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${label({
@@ -41,7 +42,7 @@ const Toggle = forwardRef(({
       disabled,
       error: !!error,
       size
-    }), children: /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, type: "checkbox", value }) })
+    }), children: /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, style, type: "checkbox", value }) })
   ] }) });
 });
 export {

package/dist/components/ToggleGroup/index.cjs

@@ -17,7 +17,8 @@ const ToggleGroupToggle = ({
   helper,
   error,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = react.useContext(ToggleGroupContext);
   if (!context) {
@@ -31,7 +32,7 @@ const ToggleGroupToggle = ({
   } = context;
   const ToggleName = `${groupName}.${name}`;
   const ToggleValue = `${value}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(index$3.Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, value: ToggleValue });
+  return /* @__PURE__ */ jsxRuntime.jsx(index$3.Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, style, value: ToggleValue });
 };
 const ToggleGroup = ({
   legend,
@@ -45,7 +46,8 @@ const ToggleGroup = ({
   onChange,
   name,
   description,
-  required = false
+  required = false,
+  style
 }) => {
   const contextValue = react.useMemo(() => ({
     error: !!error,
@@ -54,7 +56,7 @@ const ToggleGroup = ({
     onChange
   }), [name, value, onChange, error]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.fieldset}`, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1.5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.fieldset}`, style, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 0.5, children: [
         legend ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
         description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null

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

@@ -6,7 +6,7 @@ type ToggleGroupToggleProps = Omit<ComponentProps<typeof Toggle>, 'onChange' | '
 /**
  * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
  */
-export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleGroupToggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 type ToggleGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -18,9 +18,9 @@ type ToggleGroupProps = {
     children: ReactNode;
     required?: boolean;
     description?: ReactNode;
-} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required' | 'style'>;
 export declare const ToggleGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: ToggleGroupToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/ToggleGroup/index.js

@@ -15,7 +15,8 @@ const ToggleGroupToggle = ({
   helper,
   error,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const context = useContext(ToggleGroupContext);
   if (!context) {
@@ -29,7 +30,7 @@ const ToggleGroupToggle = ({
   } = context;
   const ToggleName = `${groupName}.${name}`;
   const ToggleValue = `${value}`;
-  return /* @__PURE__ */ jsx(Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, value: ToggleValue });
+  return /* @__PURE__ */ jsx(Toggle, { checked: groupValues?.includes(ToggleValue), className, "data-testid": dataTestId, disabled, error: error || contextError, helper, label, name: ToggleName, onChange, style, value: ToggleValue });
 };
 const ToggleGroup = ({
   legend,
@@ -43,7 +44,8 @@ const ToggleGroup = ({
   onChange,
   name,
   description,
-  required = false
+  required = false,
+  style
 }) => {
   const contextValue = useMemo(() => ({
     error: !!error,
@@ -52,7 +54,7 @@ const ToggleGroup = ({
     onChange
   }), [name, value, onChange, error]);
   return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, style, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
         legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
         description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null

package/dist/components/UnitInput/index.cjs

@@ -44,7 +44,8 @@ const UnitInput = ({
   onBlur,
   onKeyDown,
   dropdownAlign,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const [val, setVal] = react.useState(value);
   const localId = react.useId();
@@ -93,7 +94,7 @@ const UnitInput = ({
             setVal(numericValue);
             onChange?.(numericValue);
           }
-        }, placeholder, readOnly, required, step, type: "number", value: val }),
+        }, placeholder, readOnly, required, step, style, type: "number", value: val }),
         error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.AlertCircleIcon, { sentiment: "danger" }) : null,
         success && !error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleIcon, { sentiment: "success" }) : null
       ] }),

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

@@ -30,6 +30,6 @@ type UnitInputProps = {
     step?: number | string;
     dropdownAlign?: ComponentProps<typeof SelectInput>['dropdownAlign'];
     templateColumns?: ComponentProps<typeof Row>['templateColumns'];
-} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown'>;
-export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style'>;
+export declare const UnitInput: ({ id, name, max, min, autoFocus, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, value, unitValue, selectInputWidth, disabled, options, className, label, step, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, }: UnitInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UnitInput/index.js

@@ -42,7 +42,8 @@ const UnitInput = ({
   onBlur,
   onKeyDown,
   dropdownAlign,
-  templateColumns
+  templateColumns,
+  style
 }) => {
   const [val, setVal] = useState(value);
   const localId = useId();
@@ -91,7 +92,7 @@ const UnitInput = ({
             setVal(numericValue);
             onChange?.(numericValue);
           }
-        }, placeholder, readOnly, required, step, type: "number", value: val }),
+        }, placeholder, readOnly, required, step, style, type: "number", value: val }),
         error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
         success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
       ] }),

package/dist/components/VerificationCode/index.cjs

@@ -27,7 +27,8 @@ const VerificationCode = ({
   label,
   labelDescription,
   helper,
-  success
+  success,
+  style
 }) => {
   const uniqueId = react.useId();
   const id = inputId || uniqueId;
@@ -137,7 +138,7 @@ const VerificationCode = ({
     }
     return "neutral";
   }, [error, success]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.filedSetClass}`, "data-testid": dataTestId, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.filedSetClass}`, "data-testid": dataTestId, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsxRuntime.jsx(index.Label, { htmlFor: `${id}-0`, id: `${id}-label`, labelDescription, required, size: size === "xlarge" ? "large" : size, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: values.map((value, index2) => /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": `${ariaLabel} ${index2}`, autoComplete: "off", className: `${styles_css.inputSizes[size]} ${styles_css.inputClass}`, "data-success": !!success, "data-testid": index2, disabled, id: `${id}-${index2}`, onChange: inputOnChange(index2), onFocus: inputOnFocus, onKeyDown: inputOnKeyDown(index2), onPaste: inputOnPaste(index2), pattern: type === "number" ? "[0-9]*" : void 0, placeholder: placeholder?.[index2] ?? "", ref: inputRefs[index2], required, type: type === "number" ? "tel" : type, value }, `field-${index2}`)) }),
     error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export declare const verificationCodeSizes: Size[];
 type VerificationCodeProps = {
@@ -33,9 +33,10 @@ type VerificationCodeProps = {
     labelDescription?: ReactNode;
     helper?: ReactNode;
     success?: boolean | string;
+    style?: CSSProperties;
 };
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, }: VerificationCodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, helper, success, style, }: VerificationCodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VerificationCode/index.js

@@ -25,7 +25,8 @@ const VerificationCode = ({
   label,
   labelDescription,
   helper,
-  success
+  success,
+  style
 }) => {
   const uniqueId = useId();
   const id = inputId || uniqueId;
@@ -135,7 +136,7 @@ const VerificationCode = ({
     }
     return "neutral";
   }, [error, success]);
-  return /* @__PURE__ */ jsxs("fieldset", { className: `${className ? `${className} ` : ""}${filedSetClass}`, "data-testid": dataTestId, children: [
+  return /* @__PURE__ */ jsxs("fieldset", { className: `${className ? `${className} ` : ""}${filedSetClass}`, "data-testid": dataTestId, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-0`, id: `${id}-label`, labelDescription, required, size: size === "xlarge" ? "large" : size, children: label }) : null,
     /* @__PURE__ */ jsx("div", { children: values.map((value, index) => /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": `${ariaLabel} ${index}`, autoComplete: "off", className: `${inputSizes[size]} ${inputClass}`, "data-success": !!success, "data-testid": index, disabled, id: `${id}-${index}`, onChange: inputOnChange(index), onFocus: inputOnFocus, onKeyDown: inputOnKeyDown(index), onPaste: inputOnPaste(index), pattern: type === "number" ? "[0-9]*" : void 0, placeholder: placeholder?.[index] ?? "", ref: inputRefs[index], required, type: type === "number" ? "tel" : type, value }, `field-${index}`)) }),
     error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,

package/dist/index.cjs

@@ -6,6 +6,7 @@ const normalize = require("./utils/normalize.cjs");
 const themes = require("@ultraviolet/themes");
 const animations = require("./utils/animations.cjs");
 const utilities = require("./utils/responsive/utilities.cjs");
+const animationVanillaExtract_css = require("./utils/animationVanillaExtract.css.cjs");
 const ids = require("./utils/ids.cjs");
 const index$1 = require("./components/ActionBar/index.cjs");
 const index$2 = require("./components/Alert/index.cjs");
@@ -129,6 +130,10 @@ exports.zoomIn = animations.zoomIn;
 exports.zoomOut = animations.zoomOut;
 exports.down = utilities.down;
 exports.up = utilities.up;
+exports.fadeInVanillaExtract = animationVanillaExtract_css.fadeInVanillaExtract;
+exports.pingVanillaExtract = animationVanillaExtract_css.pingVanillaExtract;
+exports.slideFromBottomVanillaExtract = animationVanillaExtract_css.slideFromBottomVanillaExtract;
+exports.zoomInVanillaExtract = animationVanillaExtract_css.zoomInVanillaExtract;
 exports.getUUID = ids.getUUID;
 exports.ActionBar = index$1.ActionBar;
 exports.Alert = index$2.Alert;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export type { UltravioletUITheme } from './theme';
 export { darkTheme, default as theme, extendTheme, ThemeProvider, useTheme, } from './theme';
-export { Breakpoint, bounce, down, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, up, zoomIn, zoomOut, } from './utils';
+export { Breakpoint, bounce, down, fadeIn, fadeInVanillaExtract, fadeOut, flash, getUUID, normalize, ping, pingVanillaExtract, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromBottomVanillaExtract, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, up, zoomIn, zoomInVanillaExtract, zoomOut, } from './utils';

package/dist/index.js

@@ -4,6 +4,7 @@ import { default as default3 } from "./utils/normalize.js";
 import { ThemeProvider, consoleDarkTheme, consoleLightTheme, useTheme } from "@ultraviolet/themes";
 import { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from "./utils/animations.js";
 import { down, up } from "./utils/responsive/utilities.js";
+import { fadeInVanillaExtract, pingVanillaExtract, slideFromBottomVanillaExtract, zoomInVanillaExtract } from "./utils/animationVanillaExtract.css.js";
 import { getUUID } from "./utils/ids.js";
 import { ActionBar } from "./components/ActionBar/index.js";
 import { Alert } from "./components/Alert/index.js";
@@ -162,12 +163,14 @@ export {
   down,
   extendTheme,
   fadeIn,
+  fadeInVanillaExtract,
   fadeOut,
   flash,
   getUUID,
   default3 as normalize,
   notification,
   ping,
+  pingVanillaExtract,
   pulse,
   quickScaleDown,
   scaleBack,
@@ -178,6 +181,7 @@ export {
   sketchOut,
   slideDownLarge,
   slideFromBottom,
+  slideFromBottomVanillaExtract,
   slideFromLeft,
   slideFromRight,
   slideFromTop,
@@ -193,5 +197,6 @@ export {
   up,
   useTheme,
   zoomIn,
+  zoomInVanillaExtract,
   zoomOut
 };