@andrsrxn/icons 3.1.0 → 3.3.0

package/dist/ui/warning-circle.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/warning-circle.tsx
-const IconWarningCircle = ({ size = 24, className, ...props }) => {
+const IconWarningCircle = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningCircle = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-circle",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
 			/* @__PURE__ */ jsx("path", {
 				fill: "currentColor",
 				d: "M20.291 12A8.291 8.291 0 1 1 3.71 12a8.291 8.291 0 0 1 16.582 0Z",

package/dist/ui/warning-diamond.cjs

@@ -1,6 +1,7 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/warning-diamond.tsx
-const IconWarningDiamond = ({ size = 24, className, ...props }) => {
+const IconWarningDiamond = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningDiamond = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-diamond",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				fill: "currentColor",
 				d: "M10.57 4.788c.673-.689 1.01-1.033 1.43-1.033.42 0 .757.344 1.43 1.033l5.684 5.814c.645.66.968.99.968 1.398 0 .408-.323.738-.968 1.398l-5.684 5.814c-.673.689-1.01 1.033-1.43 1.033-.42 0-.757-.344-1.43-1.033l-5.684-5.814c-.645-.66-.968-.99-.968-1.398 0-.408.323-.738.968-1.398l5.684-5.814Z",

package/dist/ui/warning-diamond.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/warning-diamond.tsx
-const IconWarningDiamond = ({ size = 24, className, ...props }) => {
+const IconWarningDiamond = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningDiamond = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-diamond",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
 			/* @__PURE__ */ jsx("path", {
 				fill: "currentColor",
 				d: "M10.57 4.788c.673-.689 1.01-1.033 1.43-1.033.42 0 .757.344 1.43 1.033l5.684 5.814c.645.66.968.99.968 1.398 0 .408-.323.738-.968 1.398l-5.684 5.814c-.673.689-1.01 1.033-1.43 1.033-.42 0-.757-.344-1.43-1.033l-5.684-5.814c-.645-.66-.968-.99-.968-1.398 0-.408.323-.738.968-1.398l5.684-5.814Z",

package/dist/ui/warning-octagon.cjs

@@ -1,6 +1,7 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/warning-octagon.tsx
-const IconWarningOctagon = ({ size = 24, className, ...props }) => {
+const IconWarningOctagon = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningOctagon = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-octagon",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				fill: "currentColor",
 				d: "M14.526 4.009c.418-.001.627-.001.814.078.187.079.333.229.624.528l3.369 3.47c.285.294.427.44.5.625.074.185.07.39.065.798l-.073 4.98c-.006.4-.009.6-.085.779-.075.18-.217.32-.499.604l-3.517 3.526c-.289.29-.433.434-.616.51-.184.077-.388.077-.797.078l-4.837.006c-.418.001-.627.001-.814-.078-.187-.079-.333-.229-.624-.529l-3.369-3.47c-.285-.293-.427-.44-.5-.624-.074-.185-.07-.39-.065-.798l.073-4.98c.006-.4.009-.6.085-.779.075-.18.217-.32.499-.604l3.517-3.526c.288-.29.433-.434.616-.51.184-.077.388-.077.797-.078l4.837-.006Z",

package/dist/ui/warning-octagon.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/warning-octagon.tsx
-const IconWarningOctagon = ({ size = 24, className, ...props }) => {
+const IconWarningOctagon = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningOctagon = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-octagon",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
 			/* @__PURE__ */ jsx("path", {
 				fill: "currentColor",
 				d: "M14.526 4.009c.418-.001.627-.001.814.078.187.079.333.229.624.528l3.369 3.47c.285.294.427.44.5.625.074.185.07.39.065.798l-.073 4.98c-.006.4-.009.6-.085.779-.075.18-.217.32-.499.604l-3.517 3.526c-.289.29-.433.434-.616.51-.184.077-.388.077-.797.078l-4.837.006c-.418.001-.627.001-.814-.078-.187-.079-.333-.229-.624-.529l-3.369-3.47c-.285-.293-.427-.44-.5-.624-.074-.185-.07-.39-.065-.798l.073-4.98c.006-.4.009-.6.085-.779.075-.18.217-.32.499-.604l3.517-3.526c.288-.29.433-.434.616-.51.184-.077.388-.077.797-.078l4.837-.006Z",

package/dist/ui/warning-triangle.cjs

@@ -1,6 +1,7 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/warning-triangle.tsx
-const IconWarningTriangle = ({ size = 24, className, ...props }) => {
+const IconWarningTriangle = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningTriangle = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-triangle",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 				fill: "currentColor",
 				d: "M10.265 6.497c.774-1.412 1.161-2.117 1.753-2.117.592 0 .98.705 1.753 2.117l5.565 10.14c.725 1.321 1.087 1.982.797 2.472-.29.49-1.044.49-2.55.49H6.453c-1.506 0-2.26 0-2.55-.49-.29-.49.072-1.15.797-2.471l5.565-10.141Z",

package/dist/ui/warning-triangle.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/warning-triangle.tsx
-const IconWarningTriangle = ({ size = 24, className, ...props }) => {
+const IconWarningTriangle = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,11 +9,14 @@ const IconWarningTriangle = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "warning-triangle",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
 		children: [
+			title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
 			/* @__PURE__ */ jsx("path", {
 				fill: "currentColor",
 				d: "M10.265 6.497c.774-1.412 1.161-2.117 1.753-2.117.592 0 .98.705 1.753 2.117l5.565 10.14c.725 1.321 1.087 1.982.797 2.472-.29.49-1.044.49-2.55.49H6.453c-1.506 0-2.26 0-2.55-.49-.29-.49.072-1.15.797-2.471l5.565-10.141Z",

package/dist/ui/wave-sawtooth.cjs

@@ -1,23 +1,26 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/wave-sawtooth.tsx
-const IconWaveSawtooth = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const IconWaveSawtooth = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-sawtooth",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "m3.715 9 6.768-4.085A1 1 0 0 1 12 5.771v12.281a1 1 0 0 0 1.583.813l6.765-4.851"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-sawtooth.js

@@ -1,23 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/wave-sawtooth.tsx
-const IconWaveSawtooth = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ jsx("svg", {
+const IconWaveSawtooth = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-sawtooth",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "m3.715 9 6.768-4.085A1 1 0 0 1 12 5.771v12.281a1 1 0 0 0 1.583.813l6.765-4.851"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-sine.cjs

@@ -1,23 +1,26 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/wave-sine.tsx
-const IconWaveSine = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const IconWaveSine = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-sine",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M3.688 8.139s.68-4.14 3.695-4.14c7.214 0 2.021 16 9.236 16 2.961.001 3.71-3.99 3.71-3.99"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-sine.js

@@ -1,23 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/wave-sine.tsx
-const IconWaveSine = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ jsx("svg", {
+const IconWaveSine = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-sine",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M3.688 8.139s.68-4.14 3.695-4.14c7.214 0 2.021 16 9.236 16 2.961.001 3.71-3.99 3.71-3.99"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-square.cjs

@@ -1,23 +1,26 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/wave-square.tsx
-const IconWaveSquare = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const IconWaveSquare = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-square",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M20.283 15v1c0 1.886 0 2.828-.586 3.414-.586.586-1.528.586-3.414.586h-.244c-1.886 0-2.829 0-3.414-.586-.586-.586-.586-1.528-.586-3.414V8c0-1.886 0-2.828-.586-3.414C10.867 4 9.924 4 8.04 4h-.304c-1.886 0-2.829 0-3.414.586-.586.586-.586 1.528-.586 3.414"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-square.js

@@ -1,23 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/wave-square.tsx
-const IconWaveSquare = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ jsx("svg", {
+const IconWaveSquare = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-square",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M20.283 15v1c0 1.886 0 2.828-.586 3.414-.586.586-1.528.586-3.414.586h-.244c-1.886 0-2.829 0-3.414-.586-.586-.586-.586-1.528-.586-3.414V8c0-1.886 0-2.828-.586-3.414C10.867 4 9.924 4 8.04 4h-.304c-1.886 0-2.829 0-3.414.586-.586.586-.586 1.528-.586 3.414"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-triangle.cjs

@@ -1,23 +1,26 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/wave-triangle.tsx
-const IconWaveTriangle = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const IconWaveTriangle = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-triangle",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "m3.654 8.093.938-1.059c1.265-1.427 1.897-2.14 2.662-2.062.766.079 1.24.906 2.187 2.56l5.163 9.013c.93 1.623 1.395 2.434 2.15 2.52.755.085 1.39-.602 2.658-1.977l.951-1.031"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/wave-triangle.js

@@ -1,23 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/wave-triangle.tsx
-const IconWaveTriangle = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ jsx("svg", {
+const IconWaveTriangle = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "wave-triangle",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "m3.654 8.093.938-1.059c1.265-1.427 1.897-2.14 2.662-2.062.766.079 1.24.906 2.187 2.56l5.163 9.013c.93 1.623 1.395 2.434 2.15 2.52.755.085 1.39-.602 2.658-1.977l.951-1.031"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/waves.cjs

@@ -1,23 +1,26 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/waves.tsx
-const IconWaves = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+const IconWaves = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "waves",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M3.583 6.925S5.388 5 8.259 5c2.872 0 5.585 1.925 8.417 1.925S20.417 5 20.417 5M3.583 12.963s1.805-1.925 4.676-1.925c2.872 0 5.585 1.925 8.417 1.925s3.741-1.925 3.741-1.925M3.583 19s1.805-1.925 4.676-1.925c2.872 0 5.585 1.925 8.417 1.925s3.741-1.925 3.741-1.925"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/waves.js

@@ -1,23 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/waves.tsx
-const IconWaves = ({ size = 24, className, ...props }) => {
-	return /* @__PURE__ */ jsx("svg", {
+const IconWaves = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
+	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
 		width: size,
 		height: size,
 		"data-slot": "waves",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: /* @__PURE__ */ jsx("path", {
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", {
 			stroke: "currentColor",
 			strokeLinecap: "round",
 			strokeWidth: "1.5",
 			d: "M3.583 6.925S5.388 5 8.259 5c2.872 0 5.585 1.925 8.417 1.925S20.417 5 20.417 5M3.583 12.963s1.805-1.925 4.676-1.925c2.872 0 5.585 1.925 8.417 1.925s3.741-1.925 3.741-1.925M3.583 19s1.805-1.925 4.676-1.925c2.872 0 5.585 1.925 8.417 1.925s3.741-1.925 3.741-1.925"
-		})
+		})]
 	});
 };
 //#endregion

package/dist/ui/webcam.cjs

@@ -1,6 +1,7 @@
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/react/ui/webcam.tsx
-const IconWebcam = ({ size = 24, className, ...props }) => {
+const IconWebcam = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,20 +9,26 @@ const IconWebcam = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "webcam",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			fill: "currentColor",
-			d: "M15.828 10.186a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z",
-			opacity: ".2"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeWidth: "1.5",
-			d: "M12 16.637a6.451 6.451 0 1 0 0-12.902 6.451 6.451 0 0 0 0 12.902Zm0 0v3.628m-3.733 0h7.466m.095-10.08a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z"
-		})]
+		children: [
+			title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				fill: "currentColor",
+				d: "M15.828 10.186a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z",
+				opacity: ".2"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeWidth: "1.5",
+				d: "M12 16.637a6.451 6.451 0 1 0 0-12.902 6.451 6.451 0 0 0 0 12.902Zm0 0v3.628m-3.733 0h7.466m.095-10.08a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z"
+			})
+		]
 	});
 };
 //#endregion

package/dist/ui/webcam.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/ui/webcam.tsx
-const IconWebcam = ({ size = 24, className, ...props }) => {
+const IconWebcam = ({ size = 24, className, title, "aria-label": ariaLabel, ...props }) => {
+	const isLabelled = Boolean(ariaLabel || title);
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
@@ -8,20 +9,26 @@ const IconWebcam = ({ size = 24, className, ...props }) => {
 		width: size,
 		height: size,
 		"data-slot": "webcam",
-		"aria-hidden": "true",
+		role: isLabelled ? "img" : void 0,
+		"aria-hidden": isLabelled ? void 0 : true,
+		"aria-label": ariaLabel,
 		focusable: "false",
 		className: `ui-icon ${className ?? ""}`,
 		...props,
-		children: [/* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			d: "M15.828 10.186a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z",
-			opacity: ".2"
-		}), /* @__PURE__ */ jsx("path", {
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeWidth: "1.5",
-			d: "M12 16.637a6.451 6.451 0 1 0 0-12.902 6.451 6.451 0 0 0 0 12.902Zm0 0v3.628m-3.733 0h7.466m.095-10.08a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z"
-		})]
+		children: [
+			title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+			/* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M15.828 10.186a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z",
+				opacity: ".2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeWidth: "1.5",
+				d: "M12 16.637a6.451 6.451 0 1 0 0-12.902 6.451 6.451 0 0 0 0 12.902Zm0 0v3.628m-3.733 0h7.466m.095-10.08a3.828 3.828 0 1 1-7.656 0 3.828 3.828 0 0 1 7.656 0Z"
+			})
+		]
 	});
 };
 //#endregion