@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/esm/icons/iconSupport.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconSupport = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTable.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTable = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTachograph.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTachograph = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTachographTimeCard.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTachographTimeCard = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTarget.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTarget = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTarget2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTarget2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTarget3.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTarget3 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTelevision.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTelevision = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTelevision2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTelevision2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTextSize.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTextSize = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconThermograph.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconThermograph = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconThermometer.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconThermometer = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconThumbsDown.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconThumbsDown = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconThumbsUp.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconThumbsUp = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconTrailer.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconTrailer = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUmbrella.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUmbrella = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUnderline.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUnderline = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUndo.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUndo = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUndo2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUndo2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUndock.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUndock = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUnlocked.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUnlocked = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUpload.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUpload = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUsb.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUsb = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconUsbHub.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconUsbHub = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVideo.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVideo = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVideo2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVideo2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVideoReplay.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVideoReplay = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVisitPage.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVisitPage = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVoice.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVoice = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeDown.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeDown = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeFull.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeFull = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeHalf.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeHalf = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeMinimum.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeMinimum = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeOff.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeOff = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconVolumeOn.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconVolumeOn = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWallet.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWallet = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWallet1.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWallet1 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWarning.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWarning = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWatch.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWatch = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWatch2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWatch2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWebcam.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWebcam = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWhisper.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWhisper = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWifi.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWifi = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWifi2.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWifi2 = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWorkday.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWorkday = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWorld.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWorld = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),

package/esm/icons/iconWrench.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
-import { useUniqueId } from "../commonHelpers/useUniqueId";
 export const IconWrench = ({ className, size, title, description, focusable = false }) => {
-    const uniqueId = useUniqueId();
+    const uniqueId = useId();
     const classes = useMemo(() => classNames([
         "zen-icon",
         (size ? `zen-icon--${size}` : ""),