@ultraviolet/ui 3.13.1 → 3.15.0

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

@@ -1,93 +1,6 @@
 export declare const Toast: {
-    Button: ({ variant, className, ...props }: ({
-        type?: "button" | "reset" | "submit" | undefined;
-        autoFocus?: boolean | undefined;
-        role?: import("react").AriaRole;
-        className?: string;
-        'data-testid'?: string;
-        isLoading?: boolean;
-        'aria-label'?: string;
-        'aria-current'?: boolean;
-        'aria-controls'?: string;
-        'aria-expanded'?: boolean;
-        'aria-haspopup'?: boolean;
-        'aria-describedby'?: string;
-        'aria-disabled'?: boolean;
-        'aria-pressed'?: boolean;
-        'aria-roledescription'?: string;
-        'aria-keyshortcuts'?: string;
-        onClick?: import("react").MouseEventHandler<HTMLElement>;
-        tooltip?: string;
-        tabIndex?: number | undefined;
-        onMouseDown?: import("react").MouseEventHandler<HTMLElement>;
-        onMouseUp?: import("react").MouseEventHandler<HTMLElement>;
-        onMouseOut?: import("react").MouseEventHandler<HTMLElement>;
-        onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
-        onMouseEnter?: import("react").MouseEventHandler<HTMLElement>;
-        onMouseLeave?: import("react").MouseEventHandler<HTMLElement>;
-        onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
-        style?: import("react").CSSProperties;
-    } & {
-        disabled?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        sentiment?: "black" | "danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "white" | undefined;
-        size?: "large" | "medium" | "small" | "xsmall" | undefined;
-        variant?: "filled" | "ghost" | "outlined" | undefined;
-    } & ({
-        children: import("react").ReactNode;
-        name?: string;
-    } & ((Without<{
-        href?: string;
-        target?: string;
-        download?: string;
-    }, {
-        render: import("@ultraviolet/utils").RenderProp;
-    }> & {
-        render: import("@ultraviolet/utils").RenderProp;
-    }) | (Without<{
-        render: import("@ultraviolet/utils").RenderProp;
-    }, {
-        href?: string;
-        target?: string;
-        download?: string;
-    }> & {
-        href?: string;
-        target?: string;
-        download?: string;
-    })))) & import("react").RefAttributes<Element>) => import("react/jsx-runtime").JSX.Element;
-    Link: ({ ...props }: ({
-        children: import("react").ReactNode;
-        target?: import("react").HTMLAttributeAnchorTarget;
-        download?: string | boolean;
-        sentiment?: 'primary' | 'info';
-        prominence?: import("../Link").ProminenceProps;
-        size?: "large" | "small" | "xsmall";
-        iconPosition?: "left" | "right";
-        rel?: string | undefined;
-        className?: string;
-        onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLAnchorElement>;
-        'aria-label'?: string;
-        'aria-current'?: "date" | "false" | "location" | "page" | "step" | "time" | "true" | boolean | undefined;
-        'aria-keyshortcuts'?: string;
-        oneLine?: boolean;
-        'data-testid'?: string;
-        variant?: 'inline' | 'standalone';
-        style?: import("react").CSSProperties;
-    } & ((Without<{
-        href?: string;
-    }, {
-        render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
-    }> & {
-        render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
-    }) | (Without<{
-        render: import("@ultraviolet/utils").RenderProp<import("react").AnchorHTMLAttributes<HTMLAnchorElement>>;
-    }, {
-        href?: string;
-    }> & {
-        href?: string;
-    }))) & import("react").RefAttributes<HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
+    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof import("..").Button>) => import("react/jsx-runtime").JSX.Element;
+    Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("react/jsx-runtime").JSX.Element;
 };
 export { toast } from './Toaster';
 export { ToastContainer } from './ToasterContainer';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;IAChB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACL,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;IAChB,MAAM;IACN,IAAI;CACL,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA"}

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

@@ -10,5 +10,5 @@ export declare const Toggle: import("react").ForwardRefExoticComponent<{
     className?: string;
     error?: boolean | string;
     'data-testid'?: string;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "id" | "name" | "onBlur" | "onChange" | "onFocus" | "onKeyDown" | "required" | "style" | "tabIndex" | "value"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "checked" | "disabled" | "id" | "name" | "onBlur" | "onChange" | "onFocus" | "onKeyDown" | "required" | "style" | "tabIndex" | "value"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAO,MAAM,OAAO,CAAA;AA6BhE,eAAO,MAAM,MAAM;cA1BP,OAAO;cACP,MAAM;WACT,OAAO,GAAG,OAAO;oBACR,MAAM,GAAG,OAAO;YACxB,SAAS;mBACF,MAAM;aACZ,SAAS;gBACN,MAAM;YACV,OAAO,GAAG,MAAM;oBACR,MAAM;0OA0IvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAO,MAAM,OAAO,CAAA;AAqChE,eAAO,MAAM,MAAM;cA3BP,OAAO;cACP,MAAM;WACT,OAAO,GAAG,OAAO;oBACR,MAAM,GAAG,OAAO;YACxB,SAAS;mBACF,MAAM;aACZ,SAAS;gBACN,MAAM;YACV,OAAO,GAAG,MAAM;oBACR,MAAM;+PAgIvB,CAAA"}

package/dist/components/Toggle/index.js

@@ -3,6 +3,8 @@ import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
 import { Text, init_Text } from "../Text/index.js";
+import { hasHelperText, init_hasHelperText } from "../../helpers/hasHelperText.js";
+import { Description, init_Description } from "../Description/index.js";
 import { Row, init_Row } from "../Row/index.js";
 import { init_styles_css, toggleStyle } from "./styles.css.js";
 import { forwardRef, useId } from "react";
@@ -12,13 +14,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Toggle/index.tsx
 var Toggle;
 var init_Toggle = __esmMin(() => {
+	init_hasHelperText();
+	init_Description();
 	init_Row();
 	init_Stack();
 	init_Text();
 	init_Tooltip();
 	init_styles_css();
-	Toggle = forwardRef(({ checked, disabled = false, id, name, onChange, onFocus, onBlur, onKeyDown, size = "large", tooltip, labelPosition = "right", label, helper, tabIndex, required, className, "data-testid": dataTestId, value, error, "aria-label": ariaLabel, style }, ref) => {
+	Toggle = forwardRef(({ checked, disabled = false, id, name, onChange, onFocus, onBlur, onKeyDown, size = "large", tooltip, labelPosition = "right", label, helper, tabIndex, required, className, "data-testid": dataTestId, value, error, "aria-label": ariaLabel, style, "aria-describedby": ariaDescribedBy }, ref) => {
 		const uniqueId = useId();
+		const helperId = useId();
 		const localId = id !== null && id !== void 0 ? id : uniqueId;
 		return /* @__PURE__ */ jsx(Tooltip, {
 			text: tooltip,
@@ -33,41 +38,30 @@ var init_Toggle = __esmMin(() => {
 				children: [/* @__PURE__ */ jsxs(Stack, {
 					alignItems: "baseline",
 					gap: .25,
-					children: [
-						label ? /* @__PURE__ */ jsxs(Row, {
-							alignItems: "center",
-							gap: 1,
-							templateColumns: "auto 1fr",
-							children: [typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								htmlFor: localId,
-								prominence: "default",
-								sentiment: "neutral",
-								variant: size === "large" ? "body" : "bodySmall",
-								children: label
-							}) : label, required ? /* @__PURE__ */ jsx(Text, {
-								as: "sup",
-								sentiment: "danger",
-								variant: "body",
-								children: "*"
-							}) : null]
-						}) : null,
-						typeof error === "string" ? /* @__PURE__ */ jsx(Text, {
-							as: "p",
-							disabled,
+					children: [label ? /* @__PURE__ */ jsxs(Row, {
+						alignItems: "center",
+						gap: 1,
+						templateColumns: "auto 1fr",
+						children: [typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							htmlFor: localId,
 							prominence: "default",
-							sentiment: "danger",
-							variant: "bodySmall",
-							children: error
-						}) : null,
-						helper && !error ? /* @__PURE__ */ jsx(Text, {
-							as: "p",
-							prominence: "weak",
 							sentiment: "neutral",
-							variant: "caption",
-							children: helper
-						}) : null
-					]
+							variant: size === "large" ? "body" : "bodySmall",
+							children: label
+						}) : label, required ? /* @__PURE__ */ jsx(Text, {
+							as: "sup",
+							sentiment: "danger",
+							variant: "body",
+							children: "*"
+						}) : null]
+					}) : null, /* @__PURE__ */ jsx(Description, {
+						helper,
+						error,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
+						disabled,
+						size
+					})]
 				}), /* @__PURE__ */ jsx("div", {
 					className: toggleStyle.toggle({
 						disabled,
@@ -75,6 +69,7 @@ var init_Toggle = __esmMin(() => {
 						size
 					}),
 					children: /* @__PURE__ */ jsx("input", {
+						"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error) ? helperId : void 0),
 						"aria-disabled": disabled,
 						"aria-invalid": !!error,
 						"aria-label": ariaLabel,

package/dist/components/ToggleGroup/Context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/Context.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC,GACnE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAA;AAEzD,eAAO,MAAM,kBAAkB,6DAEnB,CAAA"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/Context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;CACf,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC,GACnE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAA;AAEzD,eAAO,MAAM,kBAAkB,6DAA+D,CAAA"}

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

@@ -1,5 +1,5 @@
-import { Toggle } from '../Toggle';
 import type { ComponentProps } from 'react';
+import { Toggle } from '../Toggle';
 type ToggleGroupToggleProps = Omit<ComponentProps<typeof Toggle>, 'onChange' | 'checked' | 'required'> & {
     value: string;
 };

package/dist/components/ToggleGroup/SingleToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/SingleToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAIlC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,KAAK,sBAAsB,GAAG,IAAI,CAChC,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,UAAU,GAAG,SAAS,GAAG,UAAU,CACpC,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,kGAU3B,sBAAsB,4CA2BxB,CAAA"}
+{"version":3,"file":"SingleToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/SingleToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IACvG,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,kGAU3B,sBAAsB,4CA2BxB,CAAA"}

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

@@ -1,5 +1,5 @@
-import { ToggleGroupToggle } from './SingleToggle';
 import type { InputHTMLAttributes, ReactNode } from 'react';
+import { ToggleGroupToggle } from './SingleToggle';
 type ToggleGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -11,8 +11,8 @@ type ToggleGroupProps = {
     children: ReactNode;
     required?: boolean;
     description?: ReactNode;
-} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required' | 'style'>;
-declare const ToggleGroupComponent: ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required' | 'style' | 'aria-describedby'>;
+declare const ToggleGroupComponent: ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, style, 'aria-describedby': ariaDescribedBy, }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 type SelectableCardOptionGroupType = typeof ToggleGroupComponent & {
     Toggle: typeof ToggleGroupToggle;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC,GAC5E,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAEnE,QAAA,MAAM,oBAAoB,uIAcvB,gBAAgB,4CA4DlB,CAAA;AAED,KAAK,6BAA6B,GAAG,OAAO,oBAAoB,GAAG;IACjE,MAAM,EAAE,OAAO,iBAAiB,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,6BAKzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAGlD,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC,GAC5E,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,kBAAkB,CAAC,CAAA;AAExF,QAAA,MAAM,oBAAoB,4KAevB,gBAAgB,4CAiDlB,CAAA;AAED,KAAK,6BAA6B,GAAG,OAAO,oBAAoB,GAAG;IACjE,MAAM,EAAE,OAAO,iBAAiB,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,6BAExB,CAAA"}

package/dist/components/ToggleGroup/index.js

@@ -2,24 +2,28 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Text, init_Text } from "../Text/index.js";
+import { hasHelperText, init_hasHelperText } from "../../helpers/hasHelperText.js";
+import { Description, init_Description } from "../Description/index.js";
 import { Label, init_Label } from "../Label/index.js";
 import { ToggleGroupContext, init_Context } from "./Context.js";
 import { ToggleGroupToggle, init_SingleToggle } from "./SingleToggle.js";
 import { init_styles_css, toggleGroupStyle } from "./styles.css.js";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { cn } from "@ultraviolet/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ToggleGroup/index.tsx
 var ToggleGroupComponent, ToggleGroup;
 var init_ToggleGroup = __esmMin(() => {
+	init_hasHelperText();
+	init_Description();
 	init_Label();
 	init_Stack();
 	init_Text();
 	init_Context();
 	init_SingleToggle();
 	init_styles_css();
-	ToggleGroupComponent = ({ legend, legendDescription, value, className, helper, error, direction = "column", children, onChange, name, description, required = false, style }) => {
+	ToggleGroupComponent = ({ legend, legendDescription, value, className, helper, error, direction = "column", children, onChange, name, description, required = false, style, "aria-describedby": ariaDescribedBy }) => {
 		const contextValue = useMemo(() => ({
 			error: !!error,
 			groupName: name,
@@ -31,52 +35,42 @@ var init_ToggleGroup = __esmMin(() => {
 			onChange,
 			error
 		]);
+		const helperId = useId();
 		return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
 			value: contextValue,
 			children: /* @__PURE__ */ jsxs(Stack, {
 				gap: 1,
-				children: [
-					/* @__PURE__ */ jsx("fieldset", {
-						className: cn(className, toggleGroupStyle.fieldset),
-						style,
-						children: /* @__PURE__ */ jsxs(Stack, {
-							gap: 1.5,
-							children: [legend || description ? /* @__PURE__ */ jsxs(Stack, {
-								gap: .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]
-							}) : null, /* @__PURE__ */ jsx(Stack, {
-								direction,
-								gap: 2,
-								children
-							})]
-						})
-					}),
-					helper ? /* @__PURE__ */ jsx(Text, {
-						as: "p",
-						prominence: "weak",
-						sentiment: "neutral",
-						variant: "caption",
-						children: helper
-					}) : null,
-					error ? /* @__PURE__ */ jsx(Text, {
-						as: "p",
-						prominence: "weak",
-						sentiment: "danger",
-						variant: "bodySmall",
-						children: error
-					}) : null
-				]
+				children: [/* @__PURE__ */ jsx("fieldset", {
+					className: cn(className, toggleGroupStyle.fieldset),
+					style,
+					"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error) ? helperId : void 0),
+					children: /* @__PURE__ */ jsxs(Stack, {
+						gap: 1.5,
+						children: [legend || description ? /* @__PURE__ */ jsxs(Stack, {
+							gap: .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]
+						}) : null, /* @__PURE__ */ jsx(Stack, {
+							direction,
+							gap: 2,
+							children
+						})]
+					})
+				}), /* @__PURE__ */ jsx(Description, {
+					helper,
+					error,
+					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
+				})]
 			})
 		});
 	};

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

@@ -1,5 +1,5 @@
-import { Popup } from '../Popup';
 import type { ComponentProps, Ref } from 'react';
+import { Popup } from '../Popup';
 /**
  * Tooltip component is used to display additional information on hover or focus.
  * It is used to explain the purpose of the element it is attached to.
@@ -29,7 +29,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<{
     onClose?: () => void;
     tabIndex?: number;
     onKeyDown?: import("react").KeyboardEventHandler;
-    'aria-haspopup'?: "dialog" | "false" | "grid" | "listbox" | "menu" | "tree" | "true" | boolean | undefined;
+    'aria-haspopup'?: import("react").HTMLAttributes<HTMLDivElement>['aria-haspopup'];
     hideOnClickOutside?: boolean;
     debounceDelay?: number;
     maxHeight?: string | number;

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAwBhD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAPN,OAAO,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC;kDAoD9E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAyBhC;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAPN,OAAO,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC;kDAoD9E,CAAA"}

package/dist/components/TreeMapChart/Tooltip.d.ts

@@ -2,6 +2,6 @@ import type { DataType } from './types';
 type TooltipProps = Pick<DataType, 'content' | 'value'> & {
     'data-testid'?: string;
 };
-export declare const Tooltip: ({ value, content, 'data-testid': dataTestId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ value, content, 'data-testid': dataTestId }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/TreeMapChart/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/Tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,KAAK,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACxD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,OAAO,mDAIjB,YAAY,4CAWd,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGvC,KAAK,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACxD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,OAAO,kDAAmD,YAAY,4CAWlF,CAAA"}

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

@@ -1,7 +1,7 @@
-import { Tooltip } from './Tooltip';
-import type { DataType } from './types';
 import type { TooltipProps, TreeMapSvgProps } from '@nivo/treemap';
 import type { ComponentProps } from 'react';
+import { Tooltip } from './Tooltip';
+import type { DataType } from './types';
 type TreeMapChartProps = {
     height?: string | number;
     data: DataType;

package/dist/components/TreeMapChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAC1C,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,yFAOtB,iBAAiB,4CA2DnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAIlE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGvC,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,KAAK,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IACnG,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,yFAOtB,iBAAiB,4CAqDnB,CAAA"}

package/dist/components/TreeMapChart/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.128.0/helpers/objectSpread2.js";
 import { getDataColors, init_treeMap } from "../../helpers/treeMap.js";
 import { init_styles_css, treeMapChartStyle } from "./styles.css.js";
 import { Tooltip, init_Tooltip } from "./Tooltip.js";
@@ -14,8 +14,8 @@ import { ResponsiveTreeMapHtml } from "@nivo/treemap";
 var TreeMapChart;
 var init_TreeMapChart = __esmMin(() => {
 	init_treeMap();
-	init_styles_css();
 	init_Tooltip();
+	init_styles_css();
 	init_objectSpread2();
 	TreeMapChart = ({ height = "537px", data, tooltipFunction, chartProps, className, "data-testid": dataTestId }) => {
 		const theme = useTheme();

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

@@ -1,7 +1,7 @@
+import type { ComponentProps, CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
 import { Row } from '../Row';
 import { SelectInput } from '../SelectInput';
 import type { OptionType } from '../SelectInput/types';
-import type { ComponentProps, CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
 type UnitInputValue = {
     inputValue: number;
     unit: string;
@@ -18,7 +18,7 @@ type UnitInputProps = {
     selectInputWidth?: number | string;
     size?: 'small' | 'medium' | 'large';
     'data-testid'?: string;
-    helper?: string;
+    helper?: ReactNode;
     unitError?: string;
     width?: CSSProperties['width'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -30,7 +30,7 @@ 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' | '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("react/jsx-runtime").JSX.Element;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'id' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'autoFocus' | 'onKeyDown' | 'style' | 'aria-describedby'>;
+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, 'aria-describedby': ariaDescribedBy, }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UnitInput/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,KAAK,cAAc,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1D,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IACxD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAA;IACnE,eAAe,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAA;CAChE,GAAG,IAAI,CACN,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,CACV,CAAA;AAED,eAAO,MAAM,SAAS,+WAmCnB,cAAc,4CA6IhB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UnitInput/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI1F,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,KAAK,cAAc,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1D,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IACxD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAA;IACnE,eAAe,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAA;CAChE,GAAG,IAAI,CACN,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,OAAO,GACP,kBAAkB,CACrB,CAAA;AAED,eAAO,MAAM,SAAS,oZAoCnB,cAAc,4CAkHhB,CAAA"}

package/dist/components/UnitInput/index.js

@@ -1,7 +1,8 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack, init_Stack } from "../Stack/index.js";
-import { Text, init_Text } from "../Text/index.js";
+import { hasHelperText, init_hasHelperText } from "../../helpers/hasHelperText.js";
+import { Description, init_Description } from "../Description/index.js";
 import { Label, init_Label } from "../Label/index.js";
 import { Row, init_Row } from "../Row/index.js";
 import { SelectInput, init_SelectInput } from "../SelectInput/index.js";
@@ -16,21 +17,18 @@ import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 //#region src/components/UnitInput/index.tsx
 var UnitInput;
 var init_UnitInput = __esmMin(() => {
+	init_hasHelperText();
+	init_Description();
 	init_Label();
 	init_Row();
 	init_SelectInput();
 	init_Stack();
-	init_Text();
 	init_styles_css();
-	UnitInput = ({ id, name = "", max = Number.MAX_SAFE_INTEGER, min = 0, autoFocus = false, size = "large", placeholder = "0", placeholderUnit = "Select item", onChange, onChangeUnitValue, value, unitValue, selectInputWidth = "12.6rem", disabled = false, options, className, label, step = 1, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style }) => {
+	UnitInput = ({ id, name = "", max = Number.MAX_SAFE_INTEGER, min = 0, autoFocus = false, size = "large", placeholder = "0", placeholderUnit = "Select item", onChange, onChangeUnitValue, value, unitValue, selectInputWidth = "12.6rem", disabled = false, options, className, label, step = 1, error, required, helper, unitError, success, "data-testid": dataTestId, width, maxWidth, labelInformation, readOnly, onFocus, onBlur, onKeyDown, dropdownAlign, templateColumns, style, "aria-describedby": ariaDescribedBy }) => {
 		const [val, setVal] = useState(value);
 		const uniqueId = useId();
+		const helperId = useId();
 		const localId = id !== null && id !== void 0 ? id : uniqueId;
-		const sentiment = useMemo(() => {
-			if (error) return "danger";
-			if (success) return "success";
-			return "neutral";
-		}, [error, success]);
 		const computedState = useMemo(() => {
 			if (disabled) return "disabled";
 			if (readOnly) return "readOnly";
@@ -71,6 +69,7 @@ var init_UnitInput = __esmMin(() => {
 						id: "input-field",
 						children: [
 							/* @__PURE__ */ jsx("input", {
+								"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
 								"aria-invalid": !!error,
 								autoFocus,
 								className: cn(className, unitInputStyle.number[size]),
@@ -105,6 +104,7 @@ var init_UnitInput = __esmMin(() => {
 							success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null
 						]
 					}), /* @__PURE__ */ jsx(SelectInput, {
+						"aria-describedby": !ariaDescribedBy && hasHelperText(helper, error) ? helperId : ariaDescribedBy,
 						className: cn(unitInputStyle.unit, unitInputStyle.unitWidth),
 						clearable: false,
 						"data-disabled": disabled,
@@ -126,15 +126,14 @@ var init_UnitInput = __esmMin(() => {
 						value: unitValue
 					})]
 				}),
-				error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, {
-					as: "p",
+				/* @__PURE__ */ jsx(Description, {
+					helper,
+					error,
+					success,
 					disabled,
-					prominence: sentiment === "neutral" ? "weak" : "default",
-					sentiment,
-					variant: "caption",
-					children: error || success || helper
-				}) : null,
-				!(error || success) && typeof helper !== "string" && helper ? helper : null
+					size,
+					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId
+				})
 			]
 		});
 	};

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

@@ -32,10 +32,11 @@ type VerificationCodeProps = {
     helper?: ReactNode;
     success?: boolean | string;
     style?: CSSProperties;
+    'aria-describedby'?: string;
 };
 /**
  * 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, style, }: VerificationCodeProps) => import("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, 'aria-describedby': ariaDescribedBy, }: VerificationCodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,iOAoB1B,qBAAqB,4CA4NvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAUd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,sQAqB1B,qBAAqB,4CAuLvB,CAAA"}