wimui 0.6.1 → 0.7.0

package/dist/components/form/Input/Input.js

@@ -1,78 +1,80 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { useWimTranslation as ee } from "../../../i18n/useWimTranslation.js";
-import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
-import { InputBase as r } from "../InputBase/InputBase.js";
-import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
-import a from "./input.module.js";
-import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { InputBase as i } from "../InputBase/InputBase.js";
+import { FieldTemplate as a } from "../FieldTemplate/FieldTemplate.js";
+import o from "./input.module.js";
+import { forwardRef as s, useId as ee, useRef as c, useState as l } from "react";
 import u from "classnames";
 import { jsx as d } from "react/jsx-runtime";
 //#region src/components/form/Input/Input.tsx
-var f = o(({ intent: o = "default", variant: f = "outline", fullWidth: te = !1, className: ne, disabled: re, leftIcon: ie, rightIcon: p, leftIconColor: m, rightIconColor: h, onLeftIconClick: ae, onRightIconClick: g, allowClear: _ = !1, showPasswordToggle: v = !0, rightIconClassName: y, rightIconRotated: oe, width: se, value: b, defaultValue: x, onChange: S, type: C, label: w, error: T, required: E, layout: D, id: O, inputClassName: k, showPasswordAriaLabel: A, hidePasswordAriaLabel: j, rightIconAriaLabel: M, styles: N, asChild: P = !1, children: F, ...I }, L) => {
-	let { t: R } = ee("common"), z = A ?? R("a11y.show_password"), ce = j ?? R("a11y.hide_password"), B = M ?? R("a11y.right_icon_action"), [V, H] = l(x ?? ""), [U, W] = l(!1), G = c(null), le = n(L, G), K = b !== void 0, q = K ? b : V, J = re, ue = (e) => {
-		K || H(e.target.value), S?.(e);
-	}, de = () => {
-		let e = G.current;
+var f = s(({ intent: s = "default", variant: f = "outline", fullWidth: p = !1, className: m, disabled: h, leftIcon: g, rightIcon: _, leftIconColor: te, rightIconColor: ne, onLeftIconClick: re, onRightIconClick: ie, allowClear: ae = !1, showPasswordToggle: oe = !0, rightIconClassName: se, rightIconRotated: ce, width: le, value: v, defaultValue: ue, onChange: y, type: b, label: x, error: S, required: C, layout: w, id: T, inputClassName: E, showPasswordAriaLabel: D, hidePasswordAriaLabel: O, rightIconAriaLabel: k, suffix: A, styles: j, asChild: M = !1, children: N, ...P }, F) => {
+	let { t: I } = n("common"), L = D ?? I("a11y.show_password"), R = O ?? I("a11y.hide_password"), de = k ?? I("a11y.right_icon_action"), [z, B] = l(ue ?? ""), [V, H] = l(!1), U = c(null), fe = r(F, U), W = v !== void 0, G = W ? v : z, K = h, pe = (e) => {
+		W || B(e.target.value), y?.(e);
+	}, me = () => {
+		let e = U.current;
 		if (!e) return;
 		let t = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-		t ? (t.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : (K || H(""), S && (e.value = "", S({
+		t ? (t.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : (W || B(""), y && (e.value = "", y({
 			target: e,
 			currentTarget: e
-		}))), K || H("");
-	}, fe = () => {
-		W((e) => !e);
-	}, pe = C === "password" && v, Y = [];
-	pe && Y.push({
-		name: U ? "EyeOffIcon" : "EyeIcon",
-		onClick: (e) => fe(),
-		ariaLabel: U ? ce : z
-	}), p && (Y.some((e) => e.name === p) || Y.push({
-		name: p,
-		onClick: g,
-		color: h,
-		ariaLabel: B,
-		className: y,
-		rotated: oe
+		}))), W || B("");
+	}, he = () => {
+		H((e) => !e);
+	}, ge = b === "password" && oe, q = [];
+	ge && q.push({
+		name: V ? "EyeOffIcon" : "EyeIcon",
+		onClick: (e) => he(),
+		ariaLabel: V ? R : L
+	}), _ && (q.some((e) => e.name === _) || q.push({
+		name: _,
+		onClick: ie,
+		color: ne,
+		ariaLabel: de,
+		className: se,
+		rotated: ce
 	}));
-	let me = C === "password" && U ? "text" : C, X = T ? "danger" : o, he = s(), Z = O || `wim-input-${he}`, Q = T ? `${Z}-error` : void 0, $ = w ? `${Z}-label` : void 0;
-	return /* @__PURE__ */ d(i, {
-		label: w,
-		error: T,
-		required: E,
-		layout: D,
+	let _e = b === "password" && V ? "text" : b, J = S ? "danger" : s, Y = ee(), X = T || `wim-input-${Y}`, Z = S ? `${X}-error` : void 0, Q = A != null && A !== "" ? `${X}-suffix` : void 0, ve = [Z, Q].filter(Boolean).join(" ") || void 0, $ = x ? `${X}-label` : void 0;
+	return /* @__PURE__ */ d(a, {
+		label: x,
+		error: S,
+		required: C,
+		layout: w,
 		labelId: $,
-		htmlFor: Z,
-		errorId: Q,
-		className: ne,
-		children: /* @__PURE__ */ d(r, {
-			intent: X,
+		htmlFor: X,
+		errorId: Z,
+		className: m,
+		children: /* @__PURE__ */ d(i, {
+			intent: J,
 			variant: f,
-			fullWidth: te,
-			width: se,
-			disabled: J,
-			leftIcon: ie,
-			leftIconColor: m,
-			onLeftIconClick: ae,
-			rightIcons: Y,
-			allowClear: _,
-			hasValue: !!q,
-			onClear: de,
-			styles: N,
-			children: /* @__PURE__ */ d(P ? e : "input", {
-				id: Z,
-				ref: le,
-				className: u("wim-input", a.root, a[X], J && a.disabled, a[f], k),
-				disabled: J,
-				value: q,
-				onChange: ue,
-				type: me,
-				"aria-invalid": X === "danger",
-				"aria-describedby": Q,
-				"aria-labelledby": w ? $ : void 0,
-				"aria-required": E,
-				...I,
-				children: P ? /* @__PURE__ */ d(t, { children: F }) : null
+			fullWidth: p,
+			width: le,
+			disabled: K,
+			leftIcon: g,
+			leftIconColor: te,
+			onLeftIconClick: re,
+			rightIcons: q,
+			suffix: A,
+			suffixId: Q,
+			allowClear: ae,
+			hasValue: !!G,
+			onClear: me,
+			styles: j,
+			children: /* @__PURE__ */ d(M ? e : "input", {
+				id: X,
+				ref: fe,
+				className: u("wim-input", o.root, o[J], K && o.disabled, o[f], E),
+				disabled: K,
+				value: G,
+				onChange: pe,
+				type: _e,
+				"aria-invalid": J === "danger",
+				"aria-describedby": ve,
+				"aria-labelledby": x ? $ : void 0,
+				"aria-required": C,
+				...P,
+				children: M ? /* @__PURE__ */ d(t, { children: N }) : null
 			})
 		})
 	});

package/dist/components/form/InputBase/InputBase.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./input-base.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({children:e,intent:s=`default`,variant:c=`outline`,fullWidth:l=!1,width:u,className:d,disabled:f,leftIcon:p,leftIconColor:m,onLeftIconClick:h,leftIconAriaLabel:g,rightIcons:_=[],allowClear:v,hasValue:y,onClear:b,clearAriaLabel:x,styles:S})=>{let{t:C}=t.useWimTranslation(`common`),w=g??C(`a11y.left_icon_action`),T=x??C(`a11y.clear_input`),E=typeof u==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(u),D=i.default.Children.map(e,e=>i.default.isValidElement(e)?i.default.cloneElement(e,{disabled:f?!0:e.props.disabled,className:(0,a.default)(e.props.className,r.default.inner,S?.inner)}):e),O=u!==void 0&&!E&&!l,k=E&&!l?u:void 0,A=e=>f?`disabled`:e||(s===`danger`?`danger`:s===`warning`?`warning`:s===`success`?`success`:`secondary`),j=[..._];v&&y&&!f&&j.push({name:`CloseIcon`,onClick:e=>{e.stopPropagation(),b?.()},ariaLabel:T});let M=k?r.default[`width${k.charAt(0).toUpperCase()}${k.slice(1)}`]:void 0;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-input-base`,r.default.root,s&&r.default[s],f&&r.default.disabled,r.default[c],l&&r.default.fullWidth,O&&r.default.hasCustomWidth,M,p&&r.default.hasLeftIcon,(j.length>0||v)&&r.default.hasRightIcon,(j.length>=2||_.length>=1&&v)&&r.default.hasMultipleRightIcons,d,S?.root),style:O?{"--wim-input-width":typeof u==`number`?`${u}px`:u}:void 0,children:[p&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icon,r.default.left,h&&r.default.clickable,S?.icon),children:h?(0,o.jsx)(`button`,{type:`button`,onClick:h,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":w,children:(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}):(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}),D,j.length>0&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icons,r.default.right,S?.icons),children:j.map((e,t)=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.iconItem,e.onClick&&r.default.clickable,e.rotated&&r.default.rotated,e.className,S?.iconItem),children:e.onClick?(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":e.ariaLabel??C(`a11y.right_icon_action`),children:(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})}):(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})},`${e.name}-${t}`))})]})};exports.InputBase=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./input-base.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({children:e,intent:s=`default`,variant:c=`outline`,fullWidth:l=!1,width:u,className:d,disabled:f,leftIcon:p,leftIconColor:m,onLeftIconClick:h,leftIconAriaLabel:g,rightIcons:_=[],suffix:v,suffixId:y,allowClear:b,hasValue:x,onClear:S,clearAriaLabel:C,styles:w})=>{let{t:T}=t.useWimTranslation(`common`),E=g??T(`a11y.left_icon_action`),D=C??T(`a11y.clear_input`),O=typeof u==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(u),k=i.default.Children.map(e,e=>i.default.isValidElement(e)?i.default.cloneElement(e,{disabled:f?!0:e.props.disabled,className:(0,a.default)(e.props.className,r.default.inner,w?.inner)}):e),A=u!==void 0&&!O&&!l,j=O&&!l?u:void 0,M=e=>f?`disabled`:e||(s===`danger`?`danger`:s===`warning`?`warning`:s===`success`?`success`:`secondary`),N=[..._];b&&x&&!f&&N.push({name:`CloseIcon`,onClick:e=>{e.stopPropagation(),S?.()},ariaLabel:D});let P=j?r.default[`width${j.charAt(0).toUpperCase()}${j.slice(1)}`]:void 0;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-input-base`,r.default.root,s&&r.default[s],f&&r.default.disabled,r.default[c],l&&r.default.fullWidth,A&&r.default.hasCustomWidth,P,p&&r.default.hasLeftIcon,(N.length>0||b)&&r.default.hasRightIcon,(N.length>=2||_.length>=1&&b)&&r.default.hasMultipleRightIcons,d,w?.root),style:A?{"--wim-input-width":typeof u==`number`?`${u}px`:u}:void 0,children:[p&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icon,r.default.left,h&&r.default.clickable,w?.icon),children:h?(0,o.jsx)(`button`,{type:`button`,onClick:h,className:(0,a.default)(r.default.iconButton,w?.iconButton),"aria-label":E,children:(0,o.jsx)(n.Icon,{name:p,size:`md`,color:M(m)})}):(0,o.jsx)(n.Icon,{name:p,size:`md`,color:M(m)})}),k,v!=null&&v!==``&&(0,o.jsx)(`span`,{id:y,className:(0,a.default)(r.default.suffix,N.length>0&&r.default.suffixClearsIcons),"data-testid":`input-suffix`,children:v}),N.length>0&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icons,r.default.right,w?.icons),children:N.map((e,t)=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.iconItem,e.onClick&&r.default.clickable,e.rotated&&r.default.rotated,e.className,w?.iconItem),children:e.onClick?(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,className:(0,a.default)(r.default.iconButton,w?.iconButton),"aria-label":e.ariaLabel??T(`a11y.right_icon_action`),children:(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:M(e.color)})}):(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:M(e.color)})},`${e.name}-${t}`))})]})};exports.InputBase=s;

package/dist/components/form/InputBase/InputBase.d.ts

@@ -35,6 +35,14 @@ export type InputBaseProps = {
     leftIconAriaLabel?: string;
     /** Icons to display on the right side */
     rightIcons?: InputBaseIcon[];
+    /**
+     * Static text shown after the control, inside the same shell — a unit such
+     * as `kg`, `%` or `円`. It sits in the flex flow, so the control shrinks to
+     * make room rather than running underneath it.
+     */
+    suffix?: React.ReactNode;
+    /** `id` for the suffix, so the control can point `aria-describedby` at it */
+    suffixId?: string;
     /** Whether to show a clear button when value is present */
     allowClear?: boolean;
     /** Whether the field currently has a value (controls clear button visibility) */
@@ -57,4 +65,4 @@ export type InputBaseProps = {
  * フォーム入力コンポーネント（Input, SearchInput, Select等）の外殻となる共用語コンポーネント。
  * prefix/suffix（アイコン）や clearable（クリアボタン）の配置とレイアウトを統一します。
  */
-export declare const InputBase: ({ children, intent, variant, fullWidth, width, className, disabled: isDisabled, leftIcon, leftIconColor, onLeftIconClick, leftIconAriaLabel, rightIcons, allowClear, hasValue, onClear, clearAriaLabel, styles: stylesProp, }: InputBaseProps) => React.JSX.Element;
+export declare const InputBase: ({ children, intent, variant, fullWidth, width, className, disabled: isDisabled, leftIcon, leftIconColor, onLeftIconClick, leftIconAriaLabel, rightIcons, suffix, suffixId, allowClear, hasValue, onClear, clearAriaLabel, styles: stylesProp, }: InputBaseProps) => React.JSX.Element;

package/dist/components/form/InputBase/InputBase.js

@@ -6,66 +6,72 @@ import r from "react";
 import i from "classnames";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/form/InputBase/InputBase.tsx
-var s = ({ children: s, intent: c = "default", variant: l = "outline", fullWidth: u = !1, width: d, className: f, disabled: p, leftIcon: m, leftIconColor: h, onLeftIconClick: g, leftIconAriaLabel: _, rightIcons: v = [], allowClear: y, hasValue: b, onClear: x, clearAriaLabel: S, styles: C }) => {
-	let { t: w } = e("common"), T = _ ?? w("a11y.left_icon_action"), E = S ?? w("a11y.clear_input"), D = typeof d == "string" && [
+var s = ({ children: s, intent: c = "default", variant: l = "outline", fullWidth: u = !1, width: d, className: f, disabled: p, leftIcon: m, leftIconColor: h, onLeftIconClick: g, leftIconAriaLabel: _, rightIcons: v = [], suffix: y, suffixId: b, allowClear: x, hasValue: S, onClear: C, clearAriaLabel: w, styles: T }) => {
+	let { t: E } = e("common"), D = _ ?? E("a11y.left_icon_action"), O = w ?? E("a11y.clear_input"), k = typeof d == "string" && [
 		"xs",
 		"sm",
 		"md",
 		"lg",
 		"xl"
-	].includes(d), O = r.Children.map(s, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+	].includes(d), A = r.Children.map(s, (e) => r.isValidElement(e) ? r.cloneElement(e, {
 		disabled: p ? !0 : e.props.disabled,
-		className: i(e.props.className, n.inner, C?.inner)
-	}) : e), k = d !== void 0 && !D && !u, A = D && !u ? d : void 0, j = (e) => p ? "disabled" : e || (c === "danger" ? "danger" : c === "warning" ? "warning" : c === "success" ? "success" : "secondary"), M = [...v];
-	y && b && !p && M.push({
+		className: i(e.props.className, n.inner, T?.inner)
+	}) : e), j = d !== void 0 && !k && !u, M = k && !u ? d : void 0, N = (e) => p ? "disabled" : e || (c === "danger" ? "danger" : c === "warning" ? "warning" : c === "success" ? "success" : "secondary"), P = [...v];
+	x && S && !p && P.push({
 		name: "CloseIcon",
 		onClick: (e) => {
-			e.stopPropagation(), x?.();
+			e.stopPropagation(), C?.();
 		},
-		ariaLabel: E
+		ariaLabel: O
 	});
-	let N = A ? n[`width${A.charAt(0).toUpperCase()}${A.slice(1)}`] : void 0;
+	let F = M ? n[`width${M.charAt(0).toUpperCase()}${M.slice(1)}`] : void 0;
 	return /* @__PURE__ */ o("div", {
-		className: i("wim-input-base", n.root, c && n[c], p && n.disabled, n[l], u && n.fullWidth, k && n.hasCustomWidth, N, m && n.hasLeftIcon, (M.length > 0 || y) && n.hasRightIcon, (M.length >= 2 || v.length >= 1 && y) && n.hasMultipleRightIcons, f, C?.root),
-		style: k ? { "--wim-input-width": typeof d == "number" ? `${d}px` : d } : void 0,
+		className: i("wim-input-base", n.root, c && n[c], p && n.disabled, n[l], u && n.fullWidth, j && n.hasCustomWidth, F, m && n.hasLeftIcon, (P.length > 0 || x) && n.hasRightIcon, (P.length >= 2 || v.length >= 1 && x) && n.hasMultipleRightIcons, f, T?.root),
+		style: j ? { "--wim-input-width": typeof d == "number" ? `${d}px` : d } : void 0,
 		children: [
 			m && /* @__PURE__ */ a("div", {
-				className: i(n.icon, n.left, g && n.clickable, C?.icon),
+				className: i(n.icon, n.left, g && n.clickable, T?.icon),
 				children: g ? /* @__PURE__ */ a("button", {
 					type: "button",
 					onClick: g,
-					className: i(n.iconButton, C?.iconButton),
-					"aria-label": T,
+					className: i(n.iconButton, T?.iconButton),
+					"aria-label": D,
 					children: /* @__PURE__ */ a(t, {
 						name: m,
 						size: "md",
-						color: j(h)
+						color: N(h)
 					})
 				}) : /* @__PURE__ */ a(t, {
 					name: m,
 					size: "md",
-					color: j(h)
+					color: N(h)
 				})
 			}),
-			O,
-			M.length > 0 && /* @__PURE__ */ a("div", {
-				className: i(n.icons, n.right, C?.icons),
-				children: M.map((e, r) => /* @__PURE__ */ a("div", {
-					className: i(n.iconItem, e.onClick && n.clickable, e.rotated && n.rotated, e.className, C?.iconItem),
+			A,
+			y != null && y !== "" && /* @__PURE__ */ a("span", {
+				id: b,
+				className: i(n.suffix, P.length > 0 && n.suffixClearsIcons),
+				"data-testid": "input-suffix",
+				children: y
+			}),
+			P.length > 0 && /* @__PURE__ */ a("div", {
+				className: i(n.icons, n.right, T?.icons),
+				children: P.map((e, r) => /* @__PURE__ */ a("div", {
+					className: i(n.iconItem, e.onClick && n.clickable, e.rotated && n.rotated, e.className, T?.iconItem),
 					children: e.onClick ? /* @__PURE__ */ a("button", {
 						type: "button",
 						onClick: e.onClick,
-						className: i(n.iconButton, C?.iconButton),
-						"aria-label": e.ariaLabel ?? w("a11y.right_icon_action"),
+						className: i(n.iconButton, T?.iconButton),
+						"aria-label": e.ariaLabel ?? E("a11y.right_icon_action"),
 						children: /* @__PURE__ */ a(t, {
 							name: e.name,
 							size: "md",
-							color: j(e.color)
+							color: N(e.color)
 						})
 					}) : /* @__PURE__ */ a(t, {
 						name: e.name,
 						size: "md",
-						color: j(e.color)
+						color: N(e.color)
 					})
 				}, `${e.name}-${r}`))
 			})

package/dist/components/form/InputBase/input-base.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_m3clw_16`,t=`_ghost_m3clw_32`,n=`_disabled_m3clw_36`,r=`_icon_m3clw_45`,i=`_iconItem_m3clw_45`,a=`_danger_m3clw_7`,o=`_warning_m3clw_61`,s=`_success_m3clw_64`,c=`_hasLeftIcon_m3clw_83`,l=`_hasRightIcon_m3clw_86`,u=`_hasMultipleRightIcons_m3clw_89`,d=`_widthXs_m3clw_92`,f=`_widthSm_m3clw_95`,p=`_widthMd_m3clw_98`,m=`_widthLg_m3clw_101`,h=`_widthXl_m3clw_104`,g=`_hasCustomWidth_m3clw_107`,_=`_fullWidth_m3clw_112`,v=`_clickable_m3clw_128`,y=`_left_m3clw_131`,b=`_icons_m3clw_134`,x=`_right_m3clw_145`,S=`_rotated_m3clw_157`,C=`_iconButton_m3clw_160`,w=`_inner_m3clw_178`,T={root:e,ghost:t,disabled:n,icon:r,iconItem:i,danger:a,warning:o,success:s,hasLeftIcon:c,hasRightIcon:l,hasMultipleRightIcons:u,widthXs:d,widthSm:f,widthMd:p,widthLg:m,widthXl:h,hasCustomWidth:g,fullWidth:_,clickable:v,left:y,icons:b,right:x,rotated:S,iconButton:C,inner:w};exports.clickable=v,exports.danger=a,exports.default=T,exports.disabled=n,exports.fullWidth=_,exports.ghost=t,exports.hasCustomWidth=g,exports.hasLeftIcon=c,exports.hasMultipleRightIcons=u,exports.hasRightIcon=l,exports.icon=r,exports.iconButton=C,exports.iconItem=i,exports.icons=b,exports.inner=w,exports.left=y,exports.right=x,exports.root=e,exports.rotated=S,exports.success=s,exports.warning=o,exports.widthLg=m,exports.widthMd=p,exports.widthSm=f,exports.widthXl=h,exports.widthXs=d;
+var e=`_root_mrju8_16`,t=`_ghost_mrju8_32`,n=`_disabled_mrju8_36`,r=`_icon_mrju8_45`,i=`_iconItem_mrju8_45`,a=`_danger_mrju8_7`,o=`_warning_mrju8_61`,s=`_success_mrju8_64`,c=`_hasLeftIcon_mrju8_83`,l=`_hasRightIcon_mrju8_86`,u=`_hasMultipleRightIcons_mrju8_89`,d=`_widthXs_mrju8_92`,f=`_widthSm_mrju8_95`,p=`_widthMd_mrju8_98`,m=`_widthLg_mrju8_101`,h=`_widthXl_mrju8_104`,g=`_hasCustomWidth_mrju8_107`,_=`_fullWidth_mrju8_112`,v=`_clickable_mrju8_128`,y=`_left_mrju8_131`,b=`_suffix_mrju8_134`,x=`_suffixClearsIcons_mrju8_142`,S=`_icons_mrju8_145`,C=`_right_mrju8_156`,w=`_rotated_mrju8_168`,T=`_iconButton_mrju8_171`,E=`_inner_mrju8_189`,D={root:e,ghost:t,disabled:n,icon:r,iconItem:i,danger:a,warning:o,success:s,hasLeftIcon:c,hasRightIcon:l,hasMultipleRightIcons:u,widthXs:d,widthSm:f,widthMd:p,widthLg:m,widthXl:h,hasCustomWidth:g,fullWidth:_,clickable:v,left:y,suffix:b,suffixClearsIcons:x,icons:S,right:C,rotated:w,iconButton:T,inner:E};exports.clickable=v,exports.danger=a,exports.default=D,exports.disabled=n,exports.fullWidth=_,exports.ghost=t,exports.hasCustomWidth=g,exports.hasLeftIcon=c,exports.hasMultipleRightIcons=u,exports.hasRightIcon=l,exports.icon=r,exports.iconButton=T,exports.iconItem=i,exports.icons=S,exports.inner=E,exports.left=y,exports.right=C,exports.root=e,exports.rotated=w,exports.success=s,exports.suffix=b,exports.suffixClearsIcons=x,exports.warning=o,exports.widthLg=m,exports.widthMd=p,exports.widthSm=f,exports.widthXl=h,exports.widthXs=d;

package/dist/components/form/InputBase/input-base.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/InputBase/input-base.module.scss
-var e = "_root_m3clw_16", t = "_ghost_m3clw_32", n = "_disabled_m3clw_36", r = "_icon_m3clw_45", i = "_iconItem_m3clw_45", a = "_danger_m3clw_7", o = "_warning_m3clw_61", s = "_success_m3clw_64", c = "_hasLeftIcon_m3clw_83", l = "_hasRightIcon_m3clw_86", u = "_hasMultipleRightIcons_m3clw_89", d = "_widthXs_m3clw_92", f = "_widthSm_m3clw_95", p = "_widthMd_m3clw_98", m = "_widthLg_m3clw_101", h = "_widthXl_m3clw_104", g = "_hasCustomWidth_m3clw_107", _ = "_fullWidth_m3clw_112", v = "_clickable_m3clw_128", y = "_left_m3clw_131", b = "_icons_m3clw_134", x = "_right_m3clw_145", S = "_rotated_m3clw_157", C = "_iconButton_m3clw_160", w = "_inner_m3clw_178", T = {
+var e = "_root_mrju8_16", t = "_ghost_mrju8_32", n = "_disabled_mrju8_36", r = "_icon_mrju8_45", i = "_iconItem_mrju8_45", a = "_danger_mrju8_7", o = "_warning_mrju8_61", s = "_success_mrju8_64", c = "_hasLeftIcon_mrju8_83", l = "_hasRightIcon_mrju8_86", u = "_hasMultipleRightIcons_mrju8_89", d = "_widthXs_mrju8_92", f = "_widthSm_mrju8_95", p = "_widthMd_mrju8_98", m = "_widthLg_mrju8_101", h = "_widthXl_mrju8_104", g = "_hasCustomWidth_mrju8_107", _ = "_fullWidth_mrju8_112", v = "_clickable_mrju8_128", y = "_left_mrju8_131", b = "_suffix_mrju8_134", x = "_suffixClearsIcons_mrju8_142", S = "_icons_mrju8_145", C = "_right_mrju8_156", w = "_rotated_mrju8_168", T = "_iconButton_mrju8_171", E = "_inner_mrju8_189", D = {
 	root: e,
 	ghost: t,
 	disabled: n,
@@ -21,11 +21,13 @@ var e = "_root_m3clw_16", t = "_ghost_m3clw_32", n = "_disabled_m3clw_36", r = "
 	fullWidth: _,
 	clickable: v,
 	left: y,
-	icons: b,
-	right: x,
-	rotated: S,
-	iconButton: C,
-	inner: w
+	suffix: b,
+	suffixClearsIcons: x,
+	icons: S,
+	right: C,
+	rotated: w,
+	iconButton: T,
+	inner: E
 };
 //#endregion
-export { v as clickable, a as danger, T as default, n as disabled, _ as fullWidth, t as ghost, g as hasCustomWidth, c as hasLeftIcon, u as hasMultipleRightIcons, l as hasRightIcon, r as icon, C as iconButton, i as iconItem, b as icons, w as inner, y as left, x as right, e as root, S as rotated, s as success, o as warning, m as widthLg, p as widthMd, f as widthSm, h as widthXl, d as widthXs };
+export { v as clickable, a as danger, D as default, n as disabled, _ as fullWidth, t as ghost, g as hasCustomWidth, c as hasLeftIcon, u as hasMultipleRightIcons, l as hasRightIcon, r as icon, T as iconButton, i as iconItem, S as icons, E as inner, y as left, C as right, e as root, w as rotated, s as success, b as suffix, x as suffixClearsIcons, o as warning, m as widthLg, p as widthMd, f as widthSm, h as widthXl, d as widthXs };

package/dist/components/form/OtpInput/OtpInput.d.ts

@@ -1,6 +1,17 @@
 import { default as React } from 'react';
 export type OtpInputLabels = {
-    digitAriaLabel?: (index: number) => string;
+    /**
+     * Accessible name for one digit box.
+     *
+     * `position` is **1-based**: the first box is `1`, and the last is `length`.
+     * It is meant to be read aloud ("Digit 3 of 6"), so it counts the way a person
+     * would. Treating it as a 0-based index and adding one yields "Digit 2" for the
+     * first box.
+     *
+     * @param position 1-based position of the box, from `1` to `length`
+     * @default (position) => `Digit ${position}`
+     */
+    digitAriaLabel?: (position: number) => string;
 };
 export interface OtpInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
     /** Number of digits */
@@ -19,7 +30,10 @@ export interface OtpInputProps extends Omit<React.ComponentPropsWithoutRef<"div"
     label?: React.ReactNode;
     /** Layout direction of label and field */
     layout?: "vertical" | "horizontal";
-    /** Labels for internationalization */
+    /**
+     * Labels for internationalization. `digitAriaLabel(position)` names one digit
+     * box and receives a **1-based** position — the first box is `1`, not `0`.
+     */
     labels?: OtpInputLabels;
     /** Whether to render as a child element. */
     asChild?: boolean;

package/dist/components/form/SegmentedControl/segmented-control.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_kpg4k_22`,t=`_fullWidth_kpg4k_36`,n=`_danger_kpg4k_13`,r=`_sm_kpg4k_43`,i=`_item_kpg4k_46`,a=`_iconOnly_kpg4k_51`,o=`_icon_kpg4k_51`,s=`_md_kpg4k_61`,c=`_lg_kpg4k_79`,l=`_slider_kpg4k_97`,u=`_ready_kpg4k_111`,d=`_active_kpg4k_148`,f=`_label_kpg4k_155`,p={root:e,fullWidth:t,danger:n,sm:r,item:i,iconOnly:a,icon:o,md:s,lg:c,slider:l,ready:u,active:d,label:f};exports.active=d,exports.danger=n,exports.default=p,exports.fullWidth=t,exports.icon=o,exports.iconOnly=a,exports.item=i,exports.label=f,exports.lg=c,exports.md=s,exports.ready=u,exports.root=e,exports.slider=l,exports.sm=r;
+var e=`_root_o619x_22`,t=`_fullWidth_o619x_37`,n=`_danger_o619x_13`,r=`_sm_o619x_44`,i=`_item_o619x_47`,a=`_iconOnly_o619x_52`,o=`_icon_o619x_52`,s=`_md_o619x_62`,c=`_lg_o619x_80`,l=`_slider_o619x_98`,u=`_ready_o619x_112`,d=`_active_o619x_149`,f=`_label_o619x_156`,p={root:e,fullWidth:t,danger:n,sm:r,item:i,iconOnly:a,icon:o,md:s,lg:c,slider:l,ready:u,active:d,label:f};exports.active=d,exports.danger=n,exports.default=p,exports.fullWidth=t,exports.icon=o,exports.iconOnly=a,exports.item=i,exports.label=f,exports.lg=c,exports.md=s,exports.ready=u,exports.root=e,exports.slider=l,exports.sm=r;

package/dist/components/form/SegmentedControl/segmented-control.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/SegmentedControl/segmented-control.module.scss
-var e = "_root_kpg4k_22", t = "_fullWidth_kpg4k_36", n = "_danger_kpg4k_13", r = "_sm_kpg4k_43", i = "_item_kpg4k_46", a = "_iconOnly_kpg4k_51", o = "_icon_kpg4k_51", s = "_md_kpg4k_61", c = "_lg_kpg4k_79", l = "_slider_kpg4k_97", u = "_ready_kpg4k_111", d = "_active_kpg4k_148", f = "_label_kpg4k_155", p = {
+var e = "_root_o619x_22", t = "_fullWidth_o619x_37", n = "_danger_o619x_13", r = "_sm_o619x_44", i = "_item_o619x_47", a = "_iconOnly_o619x_52", o = "_icon_o619x_52", s = "_md_o619x_62", c = "_lg_o619x_80", l = "_slider_o619x_98", u = "_ready_o619x_112", d = "_active_o619x_149", f = "_label_o619x_156", p = {
 	root: e,
 	fullWidth: t,
 	danger: n,

package/dist/components/media/Icon/Icon.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./icon.module.cjs"),n=require("../../../icon/registry.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=({name:e,component:r,size:o=`md`,color:s,spin:c,className:l,...u})=>{let d=r||(e?n.registeredIcons[e]:null);return d?(0,a.jsx)(d,{className:(0,i.default)(`wim-icon`,t.default.root,o&&t.default[`size-${o}`],s&&t.default[s],(c||e&&(e===`LoadingIcon`||e===`SpinnerIcon`))&&t.default.loading,l),...u}):(e&&n.warnUnregisteredIcon(e),null)};exports.Icon=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utilities/style-utils.cjs"),n=require("./icon.module.cjs"),r=require("../../../icon/registry.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=[`danger`,`success`,`warning`,`info`,`primary`,`secondary`,`tertiary`,`disabled`],c=({name:e,component:i,size:c=`md`,color:l,spin:u,className:d,style:f,...p})=>{let m=i||(e?r.registeredIcons[e]:null);if(!m)return e&&r.warnUnregisteredIcon(e),null;let h=typeof l==`string`&&s.includes(l);return(0,o.jsx)(m,{style:!h&&l?{color:t.getColorValue(l),...f}:f,className:(0,a.default)(`wim-icon`,n.default.root,c&&n.default[`size-${c}`],h&&n.default[l],(u||e&&(e===`LoadingIcon`||e===`SpinnerIcon`))&&n.default.loading,d),...p})};exports.Icon=c;

package/dist/components/media/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ComponentSize } from '../../../types/tokens';
+import { ComponentSize, WimColor } from '../../../types/tokens';
 import { IconName } from '../../../icon';
 type IconProps = Omit<React.SVGProps<SVGSVGElement>, "name"> & {
     /** Icon name. Requires `import "wimui/icons"` once at the app entry to register icons. */
@@ -10,8 +10,13 @@ type IconProps = Omit<React.SVGProps<SVGSVGElement>, "name"> & {
     size?: ComponentSize;
     /** Apply the loading rotation animation */
     spin?: boolean;
-    /** Semantic color of the icon */
-    color?: "danger" | "success" | "warning" | "info" | "primary" | "secondary" | "tertiary" | "disabled";
+    /**
+     * Colour of the icon. Takes the semantic names — `"danger"`, `"success"`,
+     * `"warning"`, `"info"`, `"primary"`, `"secondary"`, `"tertiary"`,
+     * `"disabled"` — and, like `Text`, any design token colour name such as
+     * `"text-tertiary"`, or any CSS colour value.
+     */
+    color?: WimColor;
 };
-export declare const Icon: ({ name, component, size, color, spin, className, ...props }: IconProps) => React.JSX.Element | null;
+export declare const Icon: ({ name, component, size, color, spin, className, style, ...props }: IconProps) => React.JSX.Element | null;
 export {};

package/dist/components/media/Icon/Icon.js

@@ -1,16 +1,32 @@
 "use client";
-import e from "./icon.module.js";
-import { registeredIcons as t, warnUnregisteredIcon as n } from "../../../icon/registry.js";
+import { getColorValue as e } from "../../../utilities/style-utils.js";
+import t from "./icon.module.js";
+import { registeredIcons as n, warnUnregisteredIcon as r } from "../../../icon/registry.js";
 import "react";
-import r from "classnames";
-import { jsx as i } from "react/jsx-runtime";
+import i from "classnames";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/media/Icon/Icon.tsx
-var a = ({ name: a, component: o, size: s = "md", color: c, spin: l, className: u, ...d }) => {
-	let f = o || (a ? t[a] : null);
-	return f ? /* @__PURE__ */ i(f, {
-		className: r("wim-icon", e.root, s && e[`size-${s}`], c && e[c], (l || a && (a === "LoadingIcon" || a === "SpinnerIcon")) && e.loading, u),
-		...d
-	}) : (a && n(a), null);
+var o = [
+	"danger",
+	"success",
+	"warning",
+	"info",
+	"primary",
+	"secondary",
+	"tertiary",
+	"disabled"
+], s = ({ name: s, component: c, size: l = "md", color: u, spin: d, className: f, style: p, ...m }) => {
+	let h = c || (s ? n[s] : null);
+	if (!h) return s && r(s), null;
+	let g = typeof u == "string" && o.includes(u);
+	return /* @__PURE__ */ a(h, {
+		style: !g && u ? {
+			color: e(u),
+			...p
+		} : p,
+		className: i("wim-icon", t.root, l && t[`size-${l}`], g && t[u], (d || s && (s === "LoadingIcon" || s === "SpinnerIcon")) && t.loading, f),
+		...m
+	});
 };
 //#endregion
-export { a as Icon };
+export { s as Icon };

package/dist/components/media/Icon/icon.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1ccaa_3`,t=`_danger_1ccaa_62`,n=`_success_1ccaa_65`,r=`_warning_1ccaa_68`,i=`_primary_1ccaa_71`,a=`_secondary_1ccaa_74`,o=`_tertiary_1ccaa_77`,s=`_disabled_1ccaa_80`,c=`_info_1ccaa_83`,l=`_loading_1ccaa_86`,u=`_rotate_1ccaa_1`,d={root:e,"size-xs":`_size-xs_1ccaa_35`,"size-sm":`_size-sm_1ccaa_38`,"size-md":`_size-md_1ccaa_41`,"size-lg":`_size-lg_1ccaa_44`,"size-xl":`_size-xl_1ccaa_47`,"size-2xl":`_size-2xl_1ccaa_50`,"size-3xl":`_size-3xl_1ccaa_53`,"size-4xl":`_size-4xl_1ccaa_56`,"size-5xl":`_size-5xl_1ccaa_59`,danger:t,success:n,warning:r,primary:i,secondary:a,tertiary:o,disabled:s,info:c,loading:l,rotate:u};exports.danger=t,exports.default=d,exports.disabled=s,exports.info=c,exports.loading=l,exports.primary=i,exports.root=e,exports.rotate=u,exports.secondary=a,exports.success=n,exports.tertiary=o,exports.warning=r;
+var e=`_root_1kkcf_3`,t=`_danger_1kkcf_62`,n=`_success_1kkcf_65`,r=`_warning_1kkcf_68`,i=`_primary_1kkcf_71`,a=`_secondary_1kkcf_74`,o=`_tertiary_1kkcf_77`,s=`_disabled_1kkcf_80`,c=`_info_1kkcf_83`,l=`_loading_1kkcf_86`,u=`_rotate_1kkcf_1`,d={root:e,"size-xs":`_size-xs_1kkcf_35`,"size-sm":`_size-sm_1kkcf_38`,"size-md":`_size-md_1kkcf_41`,"size-lg":`_size-lg_1kkcf_44`,"size-xl":`_size-xl_1kkcf_47`,"size-2xl":`_size-2xl_1kkcf_50`,"size-3xl":`_size-3xl_1kkcf_53`,"size-4xl":`_size-4xl_1kkcf_56`,"size-5xl":`_size-5xl_1kkcf_59`,danger:t,success:n,warning:r,primary:i,secondary:a,tertiary:o,disabled:s,info:c,loading:l,rotate:u};exports.danger=t,exports.default=d,exports.disabled=s,exports.info=c,exports.loading=l,exports.primary=i,exports.root=e,exports.rotate=u,exports.secondary=a,exports.success=n,exports.tertiary=o,exports.warning=r;

package/dist/components/media/Icon/icon.module.js

@@ -1,16 +1,16 @@
 "use client";
 //#region src/components/media/Icon/icon.module.scss
-var e = "_root_1ccaa_3", t = "_danger_1ccaa_62", n = "_success_1ccaa_65", r = "_warning_1ccaa_68", i = "_primary_1ccaa_71", a = "_secondary_1ccaa_74", o = "_tertiary_1ccaa_77", s = "_disabled_1ccaa_80", c = "_info_1ccaa_83", l = "_loading_1ccaa_86", u = "_rotate_1ccaa_1", d = {
+var e = "_root_1kkcf_3", t = "_danger_1kkcf_62", n = "_success_1kkcf_65", r = "_warning_1kkcf_68", i = "_primary_1kkcf_71", a = "_secondary_1kkcf_74", o = "_tertiary_1kkcf_77", s = "_disabled_1kkcf_80", c = "_info_1kkcf_83", l = "_loading_1kkcf_86", u = "_rotate_1kkcf_1", d = {
 	root: e,
-	"size-xs": "_size-xs_1ccaa_35",
-	"size-sm": "_size-sm_1ccaa_38",
-	"size-md": "_size-md_1ccaa_41",
-	"size-lg": "_size-lg_1ccaa_44",
-	"size-xl": "_size-xl_1ccaa_47",
-	"size-2xl": "_size-2xl_1ccaa_50",
-	"size-3xl": "_size-3xl_1ccaa_53",
-	"size-4xl": "_size-4xl_1ccaa_56",
-	"size-5xl": "_size-5xl_1ccaa_59",
+	"size-xs": "_size-xs_1kkcf_35",
+	"size-sm": "_size-sm_1kkcf_38",
+	"size-md": "_size-md_1kkcf_41",
+	"size-lg": "_size-lg_1kkcf_44",
+	"size-xl": "_size-xl_1kkcf_47",
+	"size-2xl": "_size-2xl_1kkcf_50",
+	"size-3xl": "_size-3xl_1kkcf_53",
+	"size-4xl": "_size-4xl_1kkcf_56",
+	"size-5xl": "_size-5xl_1kkcf_59",
 	danger: t,
 	success: n,
 	warning: r,

package/dist/components/media/Image/Image.cjs

@@ -4,4 +4,4 @@ const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i
       ${e.g-t.g} 0 0 0 ${t.g}
       ${e.b-t.b} 0 0 0 ${t.b}
       0 0 0 1 0
-    `},[T]),Q={width:`100%`,height:f||`auto`,objectFit:g,...I},$=p===`none`?null:i.default[`radius${p.charAt(0).toUpperCase()+p.slice(1)}`];return(0,s.jsxs)(`figure`,{ref:B,className:(0,o.default)(`wim-image`,i.default.root,F),"data-testid":`image-root`,style:{maxWidth:d||`100%`,width:`100%`,...X,...G},onMouseMove:J,onMouseLeave:Y,children:[T&&(0,s.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},children:(0,s.jsx)(`filter`,{id:q,colorInterpolationFilters:`sRGB`,children:(0,s.jsx)(`feColorMatrix`,{type:`matrix`,values:Z||``})})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.inner,$,m&&i.default.shadow,h&&i.default.border,(x||S)&&i.default.hasBackdrop,w&&w!==`none`&&i.default.hasNoise,E&&i.default.hasOverlay,D&&i.default.zoomable,k&&i.default.fadeIn,k&&V&&i.default.isLoaded,W&&k&&i.default.loading),style:f===void 0?void 0:{height:f},"data-testid":`image-inner`,children:[H&&!R&&(0,s.jsx)(`img`,{src:e,alt:c,onLoad:U,onError:()=>z(!0),className:(0,o.default)(i.default.image,(y||b||T)&&i.default.hasFilter),style:Q,loading:_,fetchPriority:N?`high`:void 0,"data-testid":`image-element`,...L}),R&&(0,s.jsx)(`div`,{className:i.default.fallback,"data-testid":`image-fallback`,children:P||(0,s.jsxs)(`div`,{className:i.default.defaultFallback,children:[(0,s.jsx)(n.Icon,{component:t.default,size:`lg`,color:`secondary`}),c&&(0,s.jsx)(`span`,{className:i.default.fallbackText,children:c})]})})]}),v&&(0,s.jsx)(`figcaption`,{className:i.default.caption,"data-testid":`image-caption`,children:v})]})};exports.Image=d;
+    `},[T]),Q={width:`100%`,height:f||`auto`,objectFit:g,...I},$=p===`none`?null:i.default[`radius${p.charAt(0).toUpperCase()+p.slice(1)}`];return(0,s.jsxs)(`figure`,{ref:B,className:(0,o.default)(`wim-image`,i.default.root,F),"data-testid":`image-root`,style:{maxWidth:d||`100%`,width:`100%`,...X,...G},onMouseMove:J,onMouseLeave:Y,children:[T&&(0,s.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},children:(0,s.jsx)(`filter`,{id:q,colorInterpolationFilters:`sRGB`,children:(0,s.jsx)(`feColorMatrix`,{type:`matrix`,values:Z||``})})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.inner,$,m&&i.default.shadow,h&&i.default.border,(x||S)&&i.default.hasBackdrop,w&&w!==`none`&&i.default.hasNoise,E&&i.default.hasOverlay,D&&i.default.zoomable,k&&i.default.fadeIn,k&&V&&i.default.isLoaded,W&&k&&i.default.loading),style:f===void 0?void 0:{height:f},"data-testid":`image-inner`,children:[H&&!R&&(0,s.jsx)(`img`,{src:e,alt:c,onLoad:U,onError:()=>z(!0),className:(0,o.default)(i.default.image,(y||b||T)&&i.default.hasFilter),style:Q,loading:_,fetchPriority:N?`high`:void 0,"data-testid":`image-element`,...L}),R&&(0,s.jsx)(`div`,{className:i.default.fallback,"data-testid":`image-fallback`,children:P||(0,s.jsxs)(`div`,{className:i.default.defaultFallback,children:[(0,s.jsx)(n.Icon,{component:t.default,size:`lg`,color:`tertiary`}),c&&(0,s.jsx)(`span`,{className:i.default.fallbackText,children:c})]})})]}),v&&(0,s.jsx)(`figcaption`,{className:i.default.caption,"data-testid":`image-caption`,children:v})]})};exports.Image=d;

package/dist/components/media/Image/Image.js

@@ -210,7 +210,7 @@ var c = (e, t) => {
 						children: [/* @__PURE__ */ o(t, {
 							component: e,
 							size: "lg",
-							color: "secondary"
+							color: "tertiary"
 						}), d && /* @__PURE__ */ o("span", {
 							className: r.fallbackText,
 							children: d

package/dist/components/typography/Code/code.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_3r8s2_2`,t=`_inline_3r8s2_8`,n=`_block_3r8s2_13`,r={root:e,inline:t,block:n};exports.block=n,exports.default=r,exports.inline=t,exports.root=e;
+var e=`_root_1qdym_2`,t=`_inline_1qdym_8`,n=`_block_1qdym_16`,r={root:e,inline:t,block:n};exports.block=n,exports.default=r,exports.inline=t,exports.root=e;

package/dist/components/typography/Code/code.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/typography/Code/code.module.scss
-var e = "_root_3r8s2_2", t = "_inline_3r8s2_8", n = "_block_3r8s2_13", r = {
+var e = "_root_1qdym_2", t = "_inline_1qdym_8", n = "_block_1qdym_16", r = {
 	root: e,
 	inline: t,
 	block: n

package/dist/components/typography/Text/Text.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("./text.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({asChild:e=!1,size:i=`md`,content:s,color:c,weight:l=`normal`,lineHeight:u,fontStyle:d=`normal`,decoration:f=`none`,className:p,style:m,children:h,...g},_)=>{let v=e?h:s??h,y=!e&&f!==`none`?(0,o.jsx)(`span`,{className:r.default[f],children:(0,o.jsx)(t.Slottable,{children:v})}):(0,o.jsx)(t.Slottable,{children:v}),b=typeof c==`string`&&[`danger`,`primary`,`success`,`warning`,`info`,`secondary`].includes(c);return(0,o.jsx)(e?t.Root:`p`,{ref:_,className:(0,a.default)(`wim-text`,r.default.root,r.default[i],l===`bold`&&r.default.bold,d===`italic`&&r.default.italic,b&&r.default[c],e&&f!==`none`&&r.default[f],p),style:{color:b?void 0:n.getColorValue(c),fontSize:n.getFontSizeValue(i),lineHeight:n.getLineHeightValue(u),fontWeight:n.getFontWeightValue(l),...m},...g,children:y})});s.displayName=`Text`,exports.Text=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("./text.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({asChild:e=!1,size:i=`md`,content:s,color:c,weight:l=`normal`,lineHeight:u,fontStyle:d=`normal`,decoration:f=`none`,nowrap:p=!1,truncate:m=!1,className:h,style:g,children:_,...v},y)=>{let b=e?_:s??_,x=!e&&f!==`none`?(0,o.jsx)(`span`,{className:r.default[f],children:(0,o.jsx)(t.Slottable,{children:b})}):(0,o.jsx)(t.Slottable,{children:b}),S=typeof c==`string`&&[`danger`,`primary`,`success`,`warning`,`info`,`secondary`].includes(c);return(0,o.jsx)(e?t.Root:`p`,{ref:y,className:(0,a.default)(`wim-text`,r.default.root,r.default[i],l===`bold`&&r.default.bold,d===`italic`&&r.default.italic,S&&r.default[c],e&&f!==`none`&&r.default[f],(p||m)&&r.default.nowrap,m&&r.default.truncate,h),style:{color:S?void 0:n.getColorValue(c),fontSize:n.getFontSizeValue(i),lineHeight:n.getLineHeightValue(u),fontWeight:n.getFontWeightValue(l),...g},...v,children:x})});s.displayName=`Text`,exports.Text=s;

package/dist/components/typography/Text/Text.d.ts

@@ -33,6 +33,18 @@ export type TextProps = Omit<React.ComponentPropsWithoutRef<"p">, "content"> & {
      * @default "none"
      */
     decoration?: "line-through" | "underline" | "highlight" | "none";
+    /**
+     * Keep the text on one line instead of wrapping. Overflow is left visible —
+     * use `truncate` to clip it with an ellipsis.
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Keep the text on one line and clip the overflow with an ellipsis.
+     * Implies `nowrap`.
+     * @default false
+     */
+    truncate?: boolean;
     /**
      * Content of the text. Alternative to children (children take precedence only with asChild).
      */
@@ -71,6 +83,18 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<Omit<React.Detai
      * @default "none"
      */
     decoration?: "line-through" | "underline" | "highlight" | "none";
+    /**
+     * Keep the text on one line instead of wrapping. Overflow is left visible —
+     * use `truncate` to clip it with an ellipsis.
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Keep the text on one line and clip the overflow with an ellipsis.
+     * Implies `nowrap`.
+     * @default false
+     */
+    truncate?: boolean;
     /**
      * Content of the text. Alternative to children (children take precedence only with asChild).
      */