@ttoss/forms 0.22.3 → 0.22.5

package/dist/MultistepForm/index.js

@@ -833,13 +833,13 @@ var MultistepFormStepper = ({
 // src/MultistepForm/MultistepHeader.tsx
 var import_ui17 = require("@ttoss/ui");
 
-// ../react-icons/dist/esm/index.js
+// ../react-icons/src/Icon.tsx
 var React4 = __toESM(require("react"));
 
-// ../../node_modules/.pnpm/@iconify-icon+react@1.0.8_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.0.1_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
 var import_react = __toESM(require("react"), 1);
 
-// ../../node_modules/.pnpm/iconify-icon@1.0.8/node_modules/iconify-icon/dist/iconify-icon.mjs
+// ../../node_modules/.pnpm/iconify-icon@2.0.0/node_modules/iconify-icon/dist/iconify-icon.mjs
 var defaultIconDimensions = Object.freeze({
   left: 0,
   top: 0,
@@ -1213,7 +1213,7 @@ function addCollection$1(data, provider) {
   const storage2 = getStorage(provider, prefix);
   return !!addIconSet(storage2, data);
 }
-function iconExists$1(name) {
+function iconLoaded$1(name) {
   return !!getIconData(name);
 }
 function getIcon$1(name) {
@@ -1675,6 +1675,7 @@ var browserCacheCountKey = browserCachePrefix + "-count";
 var browserCacheVersionKey = browserCachePrefix + "-version";
 var browserStorageHour = 36e5;
 var browserStorageCacheExpiration = 168;
+var browserStorageLimit = 50;
 function getStoredItem(func, key) {
   try {
     return func.getItem(key);
@@ -1818,7 +1819,7 @@ function storeInBrowserStorage(storage2, data) {
       set.delete(index = Array.from(set).shift());
     } else {
       index = getBrowserStorageItemsCount(func);
-      if (!setBrowserStorageItemsCount(func, index + 1)) {
+      if (index >= browserStorageLimit || !setBrowserStorageItemsCount(func, index + 1)) {
         return;
       }
     }
@@ -2012,7 +2013,6 @@ function parseIconValue(value, onload) {
       // could be 'null' -> icon is missing
     };
   }
-
   const loading = loadIcons$1([name], () => onload(value, name, getIconData(name)));
   return {
     value,
@@ -2077,6 +2077,34 @@ function calculateSize$1(size, ratio, precision) {
     isNumber = !isNumber;
   }
 }
+function splitSVGDefs(content, tag = "defs") {
+  let defs = "";
+  const index = content.indexOf("<" + tag);
+  while (index >= 0) {
+    const start = content.indexOf(">", index);
+    const end = content.indexOf("</" + tag);
+    if (start === -1 || end === -1) {
+      break;
+    }
+    const endEnd = content.indexOf(">", end);
+    if (endEnd === -1) {
+      break;
+    }
+    defs += content.slice(start + 1, end).trim();
+    content = content.slice(0, index).trim() + content.slice(endEnd + 1);
+  }
+  return {
+    defs,
+    content
+  };
+}
+function mergeDefsAndContent(defs, content) {
+  return defs ? "<defs>" + defs + "</defs>" + content : content;
+}
+function wrapSVGContent(body, start, end) {
+  const split = splitSVGDefs(body);
+  return mergeDefsAndContent(split.defs, start + split.content + end);
+}
 var isUnsetKeyword = value => value === "unset" || value === "undefined" || value === "none";
 function iconToSVG(icon, customisations) {
   const fullIcon = {
@@ -2143,7 +2171,7 @@ function iconToSVG(icon, customisations) {
       }
     }
     if (transformations.length) {
-      body = '<g transform="' + transformations.join(" ") + '">' + body + "</g>";
+      body = wrapSVGContent(body, '<g transform="' + transformations.join(" ") + '">', "</g>");
     }
   });
   const customisationsWidth = fullCustomisations.width;
@@ -2167,12 +2195,30 @@ function iconToSVG(icon, customisations) {
   };
   setAttr("width", width);
   setAttr("height", height);
-  attributes.viewBox = box.left.toString() + " " + box.top.toString() + " " + boxWidth.toString() + " " + boxHeight.toString();
+  const viewBox = [box.left, box.top, boxWidth, boxHeight];
+  attributes.viewBox = viewBox.join(" ");
   return {
     attributes,
+    viewBox,
     body
   };
 }
+function iconToHTML$1(body, attributes) {
+  let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+  for (const attr in attributes) {
+    renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
+  }
+  return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
+}
+function encodeSVGforURL(svg) {
+  return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
+}
+function svgToData(svg) {
+  return "data:image/svg+xml," + encodeSVGforURL(svg);
+}
+function svgToURL$1(svg) {
+  return 'url("' + svgToData(svg) + '")';
+}
 var detectFetch = () => {
   let callback;
   try {
@@ -2397,13 +2443,16 @@ function exportFunctions() {
   return {
     enableCache: storage2 => toggleBrowserCache(storage2, true),
     disableCache: storage2 => toggleBrowserCache(storage2, false),
-    iconExists: iconExists$1,
+    iconLoaded: iconLoaded$1,
+    iconExists: iconLoaded$1,
     getIcon: getIcon$1,
     listIcons: listIcons$1,
     addIcon: addIcon$1,
     addCollection: addCollection$1,
     calculateSize: calculateSize$1,
     buildIcon: iconToSVG,
+    iconToHTML: iconToHTML$1,
+    svgToURL: svgToURL$1,
     loadIcons: loadIcons$1,
     loadIcon: loadIcon$1,
     addAPIProvider: addAPIProvider$1,
@@ -2411,22 +2460,6 @@ function exportFunctions() {
     _api: _api2
   };
 }
-function iconToHTML(body, attributes) {
-  let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
-  for (const attr in attributes) {
-    renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
-  }
-  return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
-}
-function encodeSVGforURL(svg) {
-  return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
-}
-function svgToData(svg) {
-  return "data:image/svg+xml," + encodeSVGforURL(svg);
-}
-function svgToURL(svg) {
-  return 'url("' + svgToData(svg) + '")';
-}
 var monotoneProps = {
   "background-color": "currentColor"
 };
@@ -2459,12 +2492,12 @@ function renderSPAN(data, icon, useMask) {
     body += "<!-- " + Date.now() + " -->";
   }
   const renderAttribs = data.attributes;
-  const html = iconToHTML(body, {
+  const html = iconToHTML$1(body, {
     ...renderAttribs,
     width: icon.width + "",
     height: icon.height + ""
   });
-  const url = svgToURL(html);
+  const url = svgToURL$1(html);
   const svgStyle = node.style;
   const styles = {
     "--svg": url,
@@ -2507,10 +2540,16 @@ function renderSVG(data) {
   if (style) {
     attr.style = style;
   }
-  const html = iconToHTML(data.body, attr);
+  const html = iconToHTML$1(data.body, attr);
   node.innerHTML = cleanUpInnerHTML(html);
   return node.firstChild;
 }
+function findIconElement(parent) {
+  return Array.from(parent.childNodes).find(node => {
+    const tag = node.tagName && node.tagName.toUpperCase();
+    return tag === "SPAN" || tag === "SVG";
+  });
+}
 function renderIcon(parent, state) {
   const iconData = state.icon.data;
   const customisations = state.customisations;
@@ -2530,10 +2569,7 @@ function renderIcon(parent, state) {
         ...iconData
       }, mode === "mask");
   }
-  const oldNode = Array.from(parent.childNodes).find(node2 => {
-    const tag = node2.tagName && node2.tagName.toUpperCase();
-    return tag === "SPAN" || tag === "SVG";
-  });
+  const oldNode = findIconElement(parent);
   if (oldNode) {
     if (node.tagName === "SPAN" && oldNode.tagName === node.tagName) {
       oldNode.setAttribute("style", node.getAttribute("style"));
@@ -2573,16 +2609,23 @@ function defineIconifyIcon(name = "iconify-icon") {
   // Icon
   "icon",
   // Mode
-  "mode", "inline",
+  "mode", "inline", "observe",
   // Customisations
   "width", "height", "rotate", "flip"];
-  const IconifyIcon = class extends ParentClass {
+  const IconifyIcon2 = class extends ParentClass {
     // Root
     _shadowRoot;
-    // State
+    // Initialised
+    _initialised = false;
+    // Icon state
     _state;
     // Attributes check queued
     _checkQueued = false;
+    // Connected
+    _connected = false;
+    // Observer
+    _observer = null;
+    _visible = true;
     /**
      * Constructor
      */
@@ -2598,6 +2641,20 @@ function defineIconifyIcon(name = "iconify-icon") {
       }, inline);
       this._queueCheck();
     }
+    /**
+     * Connected to DOM
+     */
+    connectedCallback() {
+      this._connected = true;
+      this.startObserver();
+    }
+    /**
+     * Disconnected from DOM
+     */
+    disconnectedCallback() {
+      this._connected = false;
+      this.stopObserver();
+    }
     /**
      * Observed attributes
      */
@@ -2625,15 +2682,29 @@ function defineIconifyIcon(name = "iconify-icon") {
      * Attribute has changed
      */
     attributeChangedCallback(name2) {
-      if (name2 === "inline") {
-        const newInline = getInline(this);
-        const state = this._state;
-        if (newInline !== state.inline) {
-          state.inline = newInline;
-          updateStyle(this._shadowRoot, newInline);
-        }
-      } else {
-        this._queueCheck();
+      switch (name2) {
+        case "inline":
+          {
+            const newInline = getInline(this);
+            const state = this._state;
+            if (newInline !== state.inline) {
+              state.inline = newInline;
+              updateStyle(this._shadowRoot, newInline);
+            }
+            break;
+          }
+        case "observer":
+          {
+            const value = this.observer;
+            if (value) {
+              this.startObserver();
+            } else {
+              this.stopObserver();
+            }
+            break;
+          }
+        default:
+          this._queueCheck();
       }
     }
     /**
@@ -2667,6 +2738,19 @@ function defineIconifyIcon(name = "iconify-icon") {
         this.removeAttribute("inline");
       }
     }
+    /**
+     * Get/set observer
+     */
+    get observer() {
+      return this.hasAttribute("observer");
+    }
+    set observer(value) {
+      if (value) {
+        this.setAttribute("observer", "true");
+      } else {
+        this.removeAttribute("observer");
+      }
+    }
     /**
      * Restart animation
      */
@@ -2715,12 +2799,12 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._iconChanged(newIcon);
         return;
       }
-      if (!state.rendered) {
+      if (!state.rendered || !this._visible) {
         return;
       }
       const mode = this.getAttribute("mode");
       const customisations = getCustomisations(this);
-      if (state.attrMode !== mode || haveCustomisationsChanged(state.customisations, customisations)) {
+      if (state.attrMode !== mode || haveCustomisationsChanged(state.customisations, customisations) || !findIconElement(this._shadowRoot)) {
         this._renderIcon(state.icon, customisations, mode);
       }
     }
@@ -2750,6 +2834,19 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._state = setPendingState(icon, this._state.inline, this._state);
       }
     }
+    /**
+     * Force render icon on state change
+     */
+    _forceRender() {
+      if (!this._visible) {
+        const node = findIconElement(this._shadowRoot);
+        if (node) {
+          this._shadowRoot.removeChild(node);
+        }
+        return;
+      }
+      this._queueCheck();
+    }
     /**
      * Got new icon data, icon is ready to (re)render
      */
@@ -2772,10 +2869,47 @@ function defineIconifyIcon(name = "iconify-icon") {
         renderedMode
       });
     }
+    /**
+     * Start observer
+     */
+    startObserver() {
+      if (!this._observer) {
+        try {
+          this._observer = new IntersectionObserver(entries => {
+            const intersecting = entries.some(entry => entry.isIntersecting);
+            if (intersecting !== this._visible) {
+              this._visible = intersecting;
+              this._forceRender();
+            }
+          });
+          this._observer.observe(this);
+        } catch (err) {
+          if (this._observer) {
+            try {
+              this._observer.disconnect();
+            } catch (err2) {}
+            this._observer = null;
+          }
+        }
+      }
+    }
+    /**
+     * Stop observer
+     */
+    stopObserver() {
+      if (this._observer) {
+        this._observer.disconnect();
+        this._observer = null;
+        this._visible = true;
+        if (this._connected) {
+          this._forceRender();
+        }
+      }
+    }
   };
   attributes.forEach(attr => {
-    if (!(attr in IconifyIcon.prototype)) {
-      Object.defineProperty(IconifyIcon.prototype, attr, {
+    if (!(attr in IconifyIcon2.prototype)) {
+      Object.defineProperty(IconifyIcon2.prototype, attr, {
         get: function () {
           return this.getAttribute(attr);
         },
@@ -2791,29 +2925,33 @@ function defineIconifyIcon(name = "iconify-icon") {
   });
   const functions = exportFunctions();
   for (const key in functions) {
-    IconifyIcon[key] = IconifyIcon.prototype[key] = functions[key];
+    IconifyIcon2[key] = IconifyIcon2.prototype[key] = functions[key];
   }
-  customElements.define(name, IconifyIcon);
-  return IconifyIcon;
+  customElements.define(name, IconifyIcon2);
+  return IconifyIcon2;
 }
 var IconifyIconComponent = defineIconifyIcon() || exportFunctions();
 var {
   enableCache,
   disableCache,
+  iconLoaded,
   iconExists,
+  // deprecated, kept to avoid breaking changes
   getIcon,
   listIcons,
   addIcon,
   addCollection,
   calculateSize,
   buildIcon,
+  iconToHTML,
+  svgToURL,
   loadIcons,
   loadIcon,
   addAPIProvider,
   _api
 } = IconifyIconComponent;
 
-// ../../node_modules/.pnpm/@iconify-icon+react@1.0.8_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.0.1_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
 var Icon = import_react.default.forwardRef((props, ref) => {
   const newProps = {
     ...props,
@@ -2831,9 +2969,9 @@ var Icon = import_react.default.forwardRef((props, ref) => {
   return import_react.default.createElement("iconify-icon", newProps);
 });
 
-// ../react-icons/dist/esm/index.js
+// ../react-icons/src/Icon.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Icon2 = /* @__PURE__ */React4.forwardRef((props, ref) => {
+var Icon2 = React4.forwardRef((props, ref) => {
   return /* @__PURE__ */(0, import_jsx_runtime20.jsx)(Icon, {
     ref,
     "data-testid": "iconify-icon",
@@ -3045,6 +3183,6 @@ iconify-icon/dist/iconify-icon.mjs:
   * Licensed under MIT.
   *
   * @license MIT
-  * @version 1.0.8
+  * @version 2.0.0
   *)
 */

package/dist/esm/MultistepForm/index.js

@@ -151,13 +151,13 @@ var MultistepFormStepper = ({
 // src/MultistepForm/MultistepHeader.tsx
 import { CloseButton, Flex as Flex4, Image as Image2, Text as Text4 } from "@ttoss/ui";
 
-// ../react-icons/dist/esm/index.js
+// ../react-icons/src/Icon.tsx
 import * as React2 from "react";
 
-// ../../node_modules/.pnpm/@iconify-icon+react@1.0.8_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.0.1_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
 import React from "react";
 
-// ../../node_modules/.pnpm/iconify-icon@1.0.8/node_modules/iconify-icon/dist/iconify-icon.mjs
+// ../../node_modules/.pnpm/iconify-icon@2.0.0/node_modules/iconify-icon/dist/iconify-icon.mjs
 var defaultIconDimensions = Object.freeze({
   left: 0,
   top: 0,
@@ -531,7 +531,7 @@ function addCollection$1(data, provider) {
   const storage2 = getStorage(provider, prefix);
   return !!addIconSet(storage2, data);
 }
-function iconExists$1(name) {
+function iconLoaded$1(name) {
   return !!getIconData(name);
 }
 function getIcon$1(name) {
@@ -993,6 +993,7 @@ var browserCacheCountKey = browserCachePrefix + "-count";
 var browserCacheVersionKey = browserCachePrefix + "-version";
 var browserStorageHour = 36e5;
 var browserStorageCacheExpiration = 168;
+var browserStorageLimit = 50;
 function getStoredItem(func, key) {
   try {
     return func.getItem(key);
@@ -1136,7 +1137,7 @@ function storeInBrowserStorage(storage2, data) {
       set.delete(index = Array.from(set).shift());
     } else {
       index = getBrowserStorageItemsCount(func);
-      if (!setBrowserStorageItemsCount(func, index + 1)) {
+      if (index >= browserStorageLimit || !setBrowserStorageItemsCount(func, index + 1)) {
         return;
       }
     }
@@ -1330,7 +1331,6 @@ function parseIconValue(value, onload) {
       // could be 'null' -> icon is missing
     };
   }
-
   const loading = loadIcons$1([name], () => onload(value, name, getIconData(name)));
   return {
     value,
@@ -1395,6 +1395,34 @@ function calculateSize$1(size, ratio, precision) {
     isNumber = !isNumber;
   }
 }
+function splitSVGDefs(content, tag = "defs") {
+  let defs = "";
+  const index = content.indexOf("<" + tag);
+  while (index >= 0) {
+    const start = content.indexOf(">", index);
+    const end = content.indexOf("</" + tag);
+    if (start === -1 || end === -1) {
+      break;
+    }
+    const endEnd = content.indexOf(">", end);
+    if (endEnd === -1) {
+      break;
+    }
+    defs += content.slice(start + 1, end).trim();
+    content = content.slice(0, index).trim() + content.slice(endEnd + 1);
+  }
+  return {
+    defs,
+    content
+  };
+}
+function mergeDefsAndContent(defs, content) {
+  return defs ? "<defs>" + defs + "</defs>" + content : content;
+}
+function wrapSVGContent(body, start, end) {
+  const split = splitSVGDefs(body);
+  return mergeDefsAndContent(split.defs, start + split.content + end);
+}
 var isUnsetKeyword = value => value === "unset" || value === "undefined" || value === "none";
 function iconToSVG(icon, customisations) {
   const fullIcon = {
@@ -1461,7 +1489,7 @@ function iconToSVG(icon, customisations) {
       }
     }
     if (transformations.length) {
-      body = '<g transform="' + transformations.join(" ") + '">' + body + "</g>";
+      body = wrapSVGContent(body, '<g transform="' + transformations.join(" ") + '">', "</g>");
     }
   });
   const customisationsWidth = fullCustomisations.width;
@@ -1485,12 +1513,30 @@ function iconToSVG(icon, customisations) {
   };
   setAttr("width", width);
   setAttr("height", height);
-  attributes.viewBox = box.left.toString() + " " + box.top.toString() + " " + boxWidth.toString() + " " + boxHeight.toString();
+  const viewBox = [box.left, box.top, boxWidth, boxHeight];
+  attributes.viewBox = viewBox.join(" ");
   return {
     attributes,
+    viewBox,
     body
   };
 }
+function iconToHTML$1(body, attributes) {
+  let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+  for (const attr in attributes) {
+    renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
+  }
+  return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
+}
+function encodeSVGforURL(svg) {
+  return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
+}
+function svgToData(svg) {
+  return "data:image/svg+xml," + encodeSVGforURL(svg);
+}
+function svgToURL$1(svg) {
+  return 'url("' + svgToData(svg) + '")';
+}
 var detectFetch = () => {
   let callback;
   try {
@@ -1715,13 +1761,16 @@ function exportFunctions() {
   return {
     enableCache: storage2 => toggleBrowserCache(storage2, true),
     disableCache: storage2 => toggleBrowserCache(storage2, false),
-    iconExists: iconExists$1,
+    iconLoaded: iconLoaded$1,
+    iconExists: iconLoaded$1,
     getIcon: getIcon$1,
     listIcons: listIcons$1,
     addIcon: addIcon$1,
     addCollection: addCollection$1,
     calculateSize: calculateSize$1,
     buildIcon: iconToSVG,
+    iconToHTML: iconToHTML$1,
+    svgToURL: svgToURL$1,
     loadIcons: loadIcons$1,
     loadIcon: loadIcon$1,
     addAPIProvider: addAPIProvider$1,
@@ -1729,22 +1778,6 @@ function exportFunctions() {
     _api: _api2
   };
 }
-function iconToHTML(body, attributes) {
-  let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
-  for (const attr in attributes) {
-    renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
-  }
-  return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
-}
-function encodeSVGforURL(svg) {
-  return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
-}
-function svgToData(svg) {
-  return "data:image/svg+xml," + encodeSVGforURL(svg);
-}
-function svgToURL(svg) {
-  return 'url("' + svgToData(svg) + '")';
-}
 var monotoneProps = {
   "background-color": "currentColor"
 };
@@ -1777,12 +1810,12 @@ function renderSPAN(data, icon, useMask) {
     body += "<!-- " + Date.now() + " -->";
   }
   const renderAttribs = data.attributes;
-  const html = iconToHTML(body, {
+  const html = iconToHTML$1(body, {
     ...renderAttribs,
     width: icon.width + "",
     height: icon.height + ""
   });
-  const url = svgToURL(html);
+  const url = svgToURL$1(html);
   const svgStyle = node.style;
   const styles = {
     "--svg": url,
@@ -1825,10 +1858,16 @@ function renderSVG(data) {
   if (style) {
     attr.style = style;
   }
-  const html = iconToHTML(data.body, attr);
+  const html = iconToHTML$1(data.body, attr);
   node.innerHTML = cleanUpInnerHTML(html);
   return node.firstChild;
 }
+function findIconElement(parent) {
+  return Array.from(parent.childNodes).find(node => {
+    const tag = node.tagName && node.tagName.toUpperCase();
+    return tag === "SPAN" || tag === "SVG";
+  });
+}
 function renderIcon(parent, state) {
   const iconData = state.icon.data;
   const customisations = state.customisations;
@@ -1848,10 +1887,7 @@ function renderIcon(parent, state) {
         ...iconData
       }, mode === "mask");
   }
-  const oldNode = Array.from(parent.childNodes).find(node2 => {
-    const tag = node2.tagName && node2.tagName.toUpperCase();
-    return tag === "SPAN" || tag === "SVG";
-  });
+  const oldNode = findIconElement(parent);
   if (oldNode) {
     if (node.tagName === "SPAN" && oldNode.tagName === node.tagName) {
       oldNode.setAttribute("style", node.getAttribute("style"));
@@ -1891,16 +1927,23 @@ function defineIconifyIcon(name = "iconify-icon") {
   // Icon
   "icon",
   // Mode
-  "mode", "inline",
+  "mode", "inline", "observe",
   // Customisations
   "width", "height", "rotate", "flip"];
-  const IconifyIcon = class extends ParentClass {
+  const IconifyIcon2 = class extends ParentClass {
     // Root
     _shadowRoot;
-    // State
+    // Initialised
+    _initialised = false;
+    // Icon state
     _state;
     // Attributes check queued
     _checkQueued = false;
+    // Connected
+    _connected = false;
+    // Observer
+    _observer = null;
+    _visible = true;
     /**
      * Constructor
      */
@@ -1916,6 +1959,20 @@ function defineIconifyIcon(name = "iconify-icon") {
       }, inline);
       this._queueCheck();
     }
+    /**
+     * Connected to DOM
+     */
+    connectedCallback() {
+      this._connected = true;
+      this.startObserver();
+    }
+    /**
+     * Disconnected from DOM
+     */
+    disconnectedCallback() {
+      this._connected = false;
+      this.stopObserver();
+    }
     /**
      * Observed attributes
      */
@@ -1943,15 +2000,29 @@ function defineIconifyIcon(name = "iconify-icon") {
      * Attribute has changed
      */
     attributeChangedCallback(name2) {
-      if (name2 === "inline") {
-        const newInline = getInline(this);
-        const state = this._state;
-        if (newInline !== state.inline) {
-          state.inline = newInline;
-          updateStyle(this._shadowRoot, newInline);
-        }
-      } else {
-        this._queueCheck();
+      switch (name2) {
+        case "inline":
+          {
+            const newInline = getInline(this);
+            const state = this._state;
+            if (newInline !== state.inline) {
+              state.inline = newInline;
+              updateStyle(this._shadowRoot, newInline);
+            }
+            break;
+          }
+        case "observer":
+          {
+            const value = this.observer;
+            if (value) {
+              this.startObserver();
+            } else {
+              this.stopObserver();
+            }
+            break;
+          }
+        default:
+          this._queueCheck();
       }
     }
     /**
@@ -1985,6 +2056,19 @@ function defineIconifyIcon(name = "iconify-icon") {
         this.removeAttribute("inline");
       }
     }
+    /**
+     * Get/set observer
+     */
+    get observer() {
+      return this.hasAttribute("observer");
+    }
+    set observer(value) {
+      if (value) {
+        this.setAttribute("observer", "true");
+      } else {
+        this.removeAttribute("observer");
+      }
+    }
     /**
      * Restart animation
      */
@@ -2033,12 +2117,12 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._iconChanged(newIcon);
         return;
       }
-      if (!state.rendered) {
+      if (!state.rendered || !this._visible) {
         return;
       }
       const mode = this.getAttribute("mode");
       const customisations = getCustomisations(this);
-      if (state.attrMode !== mode || haveCustomisationsChanged(state.customisations, customisations)) {
+      if (state.attrMode !== mode || haveCustomisationsChanged(state.customisations, customisations) || !findIconElement(this._shadowRoot)) {
         this._renderIcon(state.icon, customisations, mode);
       }
     }
@@ -2068,6 +2152,19 @@ function defineIconifyIcon(name = "iconify-icon") {
         this._state = setPendingState(icon, this._state.inline, this._state);
       }
     }
+    /**
+     * Force render icon on state change
+     */
+    _forceRender() {
+      if (!this._visible) {
+        const node = findIconElement(this._shadowRoot);
+        if (node) {
+          this._shadowRoot.removeChild(node);
+        }
+        return;
+      }
+      this._queueCheck();
+    }
     /**
      * Got new icon data, icon is ready to (re)render
      */
@@ -2090,10 +2187,47 @@ function defineIconifyIcon(name = "iconify-icon") {
         renderedMode
       });
     }
+    /**
+     * Start observer
+     */
+    startObserver() {
+      if (!this._observer) {
+        try {
+          this._observer = new IntersectionObserver(entries => {
+            const intersecting = entries.some(entry => entry.isIntersecting);
+            if (intersecting !== this._visible) {
+              this._visible = intersecting;
+              this._forceRender();
+            }
+          });
+          this._observer.observe(this);
+        } catch (err) {
+          if (this._observer) {
+            try {
+              this._observer.disconnect();
+            } catch (err2) {}
+            this._observer = null;
+          }
+        }
+      }
+    }
+    /**
+     * Stop observer
+     */
+    stopObserver() {
+      if (this._observer) {
+        this._observer.disconnect();
+        this._observer = null;
+        this._visible = true;
+        if (this._connected) {
+          this._forceRender();
+        }
+      }
+    }
   };
   attributes.forEach(attr => {
-    if (!(attr in IconifyIcon.prototype)) {
-      Object.defineProperty(IconifyIcon.prototype, attr, {
+    if (!(attr in IconifyIcon2.prototype)) {
+      Object.defineProperty(IconifyIcon2.prototype, attr, {
         get: function () {
           return this.getAttribute(attr);
         },
@@ -2109,29 +2243,33 @@ function defineIconifyIcon(name = "iconify-icon") {
   });
   const functions = exportFunctions();
   for (const key in functions) {
-    IconifyIcon[key] = IconifyIcon.prototype[key] = functions[key];
+    IconifyIcon2[key] = IconifyIcon2.prototype[key] = functions[key];
   }
-  customElements.define(name, IconifyIcon);
-  return IconifyIcon;
+  customElements.define(name, IconifyIcon2);
+  return IconifyIcon2;
 }
 var IconifyIconComponent = defineIconifyIcon() || exportFunctions();
 var {
   enableCache,
   disableCache,
+  iconLoaded,
   iconExists,
+  // deprecated, kept to avoid breaking changes
   getIcon,
   listIcons,
   addIcon,
   addCollection,
   calculateSize,
   buildIcon,
+  iconToHTML,
+  svgToURL,
   loadIcons,
   loadIcon,
   addAPIProvider,
   _api
 } = IconifyIconComponent;
 
-// ../../node_modules/.pnpm/@iconify-icon+react@1.0.8_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.0.1_react@18.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
 var Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
   const newProps = {
     ...props,
@@ -2149,9 +2287,9 @@ var Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement("iconify-icon", newProps);
 });
 
-// ../react-icons/dist/esm/index.js
+// ../react-icons/src/Icon.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Icon2 = /* @__PURE__ */React2.forwardRef((props, ref) => {
+var Icon2 = /*#__PURE__*/React2.forwardRef((props, ref) => {
   return /* @__PURE__ */jsx6(Icon, {
     ref,
     "data-testid": "iconify-icon",
@@ -2360,6 +2498,6 @@ iconify-icon/dist/iconify-icon.mjs:
   * Licensed under MIT.
   *
   * @license MIT
-  * @version 1.0.8
+  * @version 2.0.0
   *)
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.22.3",
+  "version": "0.22.5",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -36,25 +36,25 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^1.26.0",
-    "@ttoss/ui": "^4.1.1"
+    "@ttoss/react-i18n": "^1.26.1",
+    "@ttoss/ui": "^4.1.3"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.48",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.58",
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.50.1",
-    "theme-ui": "^0.16.1",
-    "tsup": "^8.0.1",
+    "theme-ui": "^0.16.2",
+    "tsup": "^8.0.2",
     "yup": "^1.3.3",
-    "@ttoss/config": "^1.31.4",
-    "@ttoss/i18n-cli": "^0.7.5",
-    "@ttoss/react-i18n": "^1.26.0",
-    "@ttoss/react-icons": "^0.3.0",
-    "@ttoss/test-utils": "^2.1.0",
-    "@ttoss/ui": "^4.1.1"
+    "@ttoss/config": "^1.31.5",
+    "@ttoss/i18n-cli": "^0.7.6",
+    "@ttoss/react-i18n": "^1.26.1",
+    "@ttoss/test-utils": "^2.1.1",
+    "@ttoss/react-icons": "^0.3.1",
+    "@ttoss/ui": "^4.1.3"
   },
   "publishConfig": {
     "access": "public",