@brightspot/ui 1.11.0 → 3.0.0

package/dist/storybook/assets/{index-DKF0ypu5.js → index-D605PvQH.js}

@@ -1 +1 @@
-import{R as e}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};
+import{R as e}from"./iframe-Sf9RHZFu.js";import"./preload-helper-PPVm8Dsz.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};

package/dist/storybook/assets/{onFind-C0l4Gew0.js → onFind-C41m8c_a.js}

@@ -1 +1 @@
-import{Q as W}from"./iframe-DloIUNZz.js";var w={exports:{}},K=w.exports,I;function V(){return I||(I=1,(function(a){(function(t,e){a.exports?a.exports=e():t.log=e()})(K,function(){var t=function(){},e="undefined",s=typeof window!==e&&typeof window.navigator!==e&&/Trident\/|MSIE /.test(window.navigator.userAgent),o=["trace","debug","info","warn","error"],n={},c=null;function k(i,u){var r=i[u];if(typeof r.bind=="function")return r.bind(i);try{return Function.prototype.bind.call(r,i)}catch{return function(){return Function.prototype.apply.apply(r,[i,arguments])}}}function U(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function P(i){return i==="debug"&&(i="log"),typeof console===e?!1:i==="trace"&&s?U:console[i]!==void 0?k(console,i):console.log!==void 0?k(console,"log"):t}function v(){for(var i=this.getLevel(),u=0;u<o.length;u++){var r=o[u];this[r]=u<i?t:this.methodFactory(r,i,this.name)}if(this.log=this.debug,typeof console===e&&i<this.levels.SILENT)return"No console available for logging"}function q(i){return function(){typeof console!==e&&(v.call(this),this[i].apply(this,arguments))}}function z(i,u,r){return P(i)||q.apply(this,arguments)}function T(i,u){var r=this,b,E,h,g="loglevel";typeof i=="string"?g+=":"+i:typeof i=="symbol"&&(g=void 0);function D(l){var f=(o[l]||"silent").toUpperCase();if(!(typeof window===e||!g)){try{window.localStorage[g]=f;return}catch{}try{window.document.cookie=encodeURIComponent(g)+"="+f+";"}catch{}}}function x(){var l;if(!(typeof window===e||!g)){try{l=window.localStorage[g]}catch{}if(typeof l===e)try{var f=window.document.cookie,m=encodeURIComponent(g),C=f.indexOf(m+"=");C!==-1&&(l=/^([^;]+)/.exec(f.slice(C+m.length+1))[1])}catch{}return r.levels[l]===void 0&&(l=void 0),l}}function $(){if(!(typeof window===e||!g)){try{window.localStorage.removeItem(g)}catch{}try{window.document.cookie=encodeURIComponent(g)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch{}}}function y(l){var f=l;if(typeof f=="string"&&r.levels[f.toUpperCase()]!==void 0&&(f=r.levels[f.toUpperCase()]),typeof f=="number"&&f>=0&&f<=r.levels.SILENT)return f;throw new TypeError("log.setLevel() called with invalid level: "+l)}r.name=i,r.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},r.methodFactory=u||z,r.getLevel=function(){return h??E??b},r.setLevel=function(l,f){return h=y(l),f!==!1&&D(h),v.call(r)},r.setDefaultLevel=function(l){E=y(l),x()||r.setLevel(l,!1)},r.resetLevel=function(){h=null,$(),v.call(r)},r.enableAll=function(l){r.setLevel(r.levels.TRACE,l)},r.disableAll=function(l){r.setLevel(r.levels.SILENT,l)},r.rebuild=function(){if(c!==r&&(b=y(c.getLevel())),v.call(r),c===r)for(var l in n)n[l].rebuild()},b=y(c?c.getLevel():"WARN");var F=x();F!=null&&(h=y(F)),v.call(r)}c=new T,c.getLogger=function(u){if(typeof u!="symbol"&&typeof u!="string"||u==="")throw new TypeError("You must supply a name when creating a logger.");var r=n[u];return r||(r=n[u]=new T(u,c.methodFactory)),r};var _=typeof window!==e?window.log:void 0;return c.noConflict=function(){return typeof window!==e&&window.log===c&&(window.log=_),c},c.getLoggers=function(){return n},c.default=c,c})})(w)),w.exports}var Y=V();const G=W(Y),R=Symbol.for("brightspot.onFind");let p;function d(){return p||(p=globalThis[R],p||(p={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerFrame:0,initialized:!1},globalThis[R]=p),p)}class J{#r;#e;#t;#i;#n;constructor(t,e,s){this.#r=t,this.#e=`data-ofc${d().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(n=>n.indexOf(",")>-1)?n=>n:n=>`${n}:not([${this.#e}])`).join(","),this.#i=s;const o=e.map(n=>n.trim()).filter(n=>n.indexOf(" ")<0&&n.indexOf(",")<0);o.length===e.length&&(this.#n=o)}addTriggerElements(t,e){if(this.#r.contains(e)){e.matches(this.#t)&&t.push(e);for(const s of e.querySelectorAll(this.#t))t.push(s)}}trigger(t){if(document.readyState!=="loading")if(this.#n&&Array.isArray(t))for(const e of t)this.#n.some(s=>e.matches(s))&&this.#o(e);else for(const e of this.#r.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!N(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#i(t)}catch(e){G.error("Failed callback!",t,e)}}}}function N(a){if(!(a instanceof Element))return!1;const{blacklist:t}=d();return t.length>0&&t.some(e=>a.closest(e)!==null)}const S=Array.prototype.every,O=a=>a.nodeType===Node.TEXT_NODE;function L(a){const t=d();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(a),s=[];if(e){for(const o of a){const n=o.target;if(!N(n))switch(o.type){case"attributes":o.oldValue!==n.getAttribute(o.attributeName)&&s.push(o);break;case"childList":(!S.call(o.addedNodes,O)||!S.call(o.removedNodes,O))&&s.push(o);break}}if(s.length===0)return}if(s.length>500&&(t.triggerAll=!0),!t.triggerAll)if(e)for(const o of s){const n=o.target;switch(o.type){case"attributes":t.triggerElements.push(n);break;case"childList":for(const c of t.callbacks)c.addTriggerElements(t.triggerElements,n);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{const o=t.triggerAll?void 0:t.triggerElements;t.triggerAll=!1,t.triggerElements=[],t.triggerFrame=0,t.callbacks.forEach(n=>n.trigger(o))}))}function M(){L(),new MutationObserver(L).observe(document,{attributes:!0,attributeFilter:["class","data-bsp-autosubmit","data-chart-type","data-code-type","data-internal-name","data-tab","name","rel","target"],attributeOldValue:!0,childList:!0,subtree:!0})}function Q(){const a=d();a.initialized||(a.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",M):M())}function A(a,t,e){Q();let s,o;typeof e<"u"?(s=a,o=t):(s=document,o=a,e=t);const n=new J(s,o,e);n.trigger(),d().callbacks.push(n)}A.triggerCallbacks=L;A.pause=()=>{d().triggerPaused=!0};A.resume=()=>{const a=d();a.triggerPaused=!1,a.triggerOnResume&&(a.triggerOnResume=!1,setTimeout(L,100))};A.ignore=(...a)=>{const{blacklist:t}=d();for(const e of a){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};export{G as l,A as o};
+import{Q as W}from"./iframe-Sf9RHZFu.js";var w={exports:{}},K=w.exports,I;function V(){return I||(I=1,(function(a){(function(t,e){a.exports?a.exports=e():t.log=e()})(K,function(){var t=function(){},e="undefined",s=typeof window!==e&&typeof window.navigator!==e&&/Trident\/|MSIE /.test(window.navigator.userAgent),o=["trace","debug","info","warn","error"],n={},c=null;function k(i,u){var r=i[u];if(typeof r.bind=="function")return r.bind(i);try{return Function.prototype.bind.call(r,i)}catch{return function(){return Function.prototype.apply.apply(r,[i,arguments])}}}function U(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function P(i){return i==="debug"&&(i="log"),typeof console===e?!1:i==="trace"&&s?U:console[i]!==void 0?k(console,i):console.log!==void 0?k(console,"log"):t}function v(){for(var i=this.getLevel(),u=0;u<o.length;u++){var r=o[u];this[r]=u<i?t:this.methodFactory(r,i,this.name)}if(this.log=this.debug,typeof console===e&&i<this.levels.SILENT)return"No console available for logging"}function q(i){return function(){typeof console!==e&&(v.call(this),this[i].apply(this,arguments))}}function z(i,u,r){return P(i)||q.apply(this,arguments)}function T(i,u){var r=this,b,E,h,g="loglevel";typeof i=="string"?g+=":"+i:typeof i=="symbol"&&(g=void 0);function D(l){var f=(o[l]||"silent").toUpperCase();if(!(typeof window===e||!g)){try{window.localStorage[g]=f;return}catch{}try{window.document.cookie=encodeURIComponent(g)+"="+f+";"}catch{}}}function x(){var l;if(!(typeof window===e||!g)){try{l=window.localStorage[g]}catch{}if(typeof l===e)try{var f=window.document.cookie,m=encodeURIComponent(g),C=f.indexOf(m+"=");C!==-1&&(l=/^([^;]+)/.exec(f.slice(C+m.length+1))[1])}catch{}return r.levels[l]===void 0&&(l=void 0),l}}function $(){if(!(typeof window===e||!g)){try{window.localStorage.removeItem(g)}catch{}try{window.document.cookie=encodeURIComponent(g)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch{}}}function y(l){var f=l;if(typeof f=="string"&&r.levels[f.toUpperCase()]!==void 0&&(f=r.levels[f.toUpperCase()]),typeof f=="number"&&f>=0&&f<=r.levels.SILENT)return f;throw new TypeError("log.setLevel() called with invalid level: "+l)}r.name=i,r.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},r.methodFactory=u||z,r.getLevel=function(){return h??E??b},r.setLevel=function(l,f){return h=y(l),f!==!1&&D(h),v.call(r)},r.setDefaultLevel=function(l){E=y(l),x()||r.setLevel(l,!1)},r.resetLevel=function(){h=null,$(),v.call(r)},r.enableAll=function(l){r.setLevel(r.levels.TRACE,l)},r.disableAll=function(l){r.setLevel(r.levels.SILENT,l)},r.rebuild=function(){if(c!==r&&(b=y(c.getLevel())),v.call(r),c===r)for(var l in n)n[l].rebuild()},b=y(c?c.getLevel():"WARN");var F=x();F!=null&&(h=y(F)),v.call(r)}c=new T,c.getLogger=function(u){if(typeof u!="symbol"&&typeof u!="string"||u==="")throw new TypeError("You must supply a name when creating a logger.");var r=n[u];return r||(r=n[u]=new T(u,c.methodFactory)),r};var _=typeof window!==e?window.log:void 0;return c.noConflict=function(){return typeof window!==e&&window.log===c&&(window.log=_),c},c.getLoggers=function(){return n},c.default=c,c})})(w)),w.exports}var Y=V();const G=W(Y),R=Symbol.for("brightspot.onFind");let p;function d(){return p||(p=globalThis[R],p||(p={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerFrame:0,initialized:!1},globalThis[R]=p),p)}class J{#r;#e;#t;#i;#n;constructor(t,e,s){this.#r=t,this.#e=`data-ofc${d().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(n=>n.indexOf(",")>-1)?n=>n:n=>`${n}:not([${this.#e}])`).join(","),this.#i=s;const o=e.map(n=>n.trim()).filter(n=>n.indexOf(" ")<0&&n.indexOf(",")<0);o.length===e.length&&(this.#n=o)}addTriggerElements(t,e){if(this.#r.contains(e)){e.matches(this.#t)&&t.push(e);for(const s of e.querySelectorAll(this.#t))t.push(s)}}trigger(t){if(document.readyState!=="loading")if(this.#n&&Array.isArray(t))for(const e of t)this.#n.some(s=>e.matches(s))&&this.#o(e);else for(const e of this.#r.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!N(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#i(t)}catch(e){G.error("Failed callback!",t,e)}}}}function N(a){if(!(a instanceof Element))return!1;const{blacklist:t}=d();return t.length>0&&t.some(e=>a.closest(e)!==null)}const S=Array.prototype.every,O=a=>a.nodeType===Node.TEXT_NODE;function L(a){const t=d();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(a),s=[];if(e){for(const o of a){const n=o.target;if(!N(n))switch(o.type){case"attributes":o.oldValue!==n.getAttribute(o.attributeName)&&s.push(o);break;case"childList":(!S.call(o.addedNodes,O)||!S.call(o.removedNodes,O))&&s.push(o);break}}if(s.length===0)return}if(s.length>500&&(t.triggerAll=!0),!t.triggerAll)if(e)for(const o of s){const n=o.target;switch(o.type){case"attributes":t.triggerElements.push(n);break;case"childList":for(const c of t.callbacks)c.addTriggerElements(t.triggerElements,n);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{const o=t.triggerAll?void 0:t.triggerElements;t.triggerAll=!1,t.triggerElements=[],t.triggerFrame=0,t.callbacks.forEach(n=>n.trigger(o))}))}function M(){L(),new MutationObserver(L).observe(document,{attributes:!0,attributeFilter:["class","data-bsp-autosubmit","data-chart-type","data-code-type","data-internal-name","data-tab","name","rel","target"],attributeOldValue:!0,childList:!0,subtree:!0})}function Q(){const a=d();a.initialized||(a.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",M):M())}function A(a,t,e){Q();let s,o;typeof e<"u"?(s=a,o=t):(s=document,o=a,e=t);const n=new J(s,o,e);n.trigger(),d().callbacks.push(n)}A.triggerCallbacks=L;A.pause=()=>{d().triggerPaused=!0};A.resume=()=>{const a=d();a.triggerPaused=!1,a.triggerOnResume&&(a.triggerOnResume=!1,setTimeout(L,100))};A.ignore=(...a)=>{const{blacklist:t}=d();for(const e of a){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};export{G as l,A as o};

package/dist/storybook/assets/{onFind.stories-DOTt9puO.js → onFind.stories-MOTfGlJd.js}

@@ -1,4 +1,4 @@
-import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4Gew0.js";import"./preload-helper-PPVm8Dsz.js";const F=Symbol.for("brightspot.onFind");let y;function v(){return y||(y=globalThis[F],y||(y={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerFrame:0,initialized:!1},globalThis[F]=y),y)}class O{#n;#e;#t;#a;#s;constructor(t,e,n){this.#n=t,this.#e=`data-ofc${v().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(o=>o.indexOf(",")>-1)?o=>o:o=>`${o}:not([${this.#e}])`).join(","),this.#a=n;const a=e.map(o=>o.trim()).filter(o=>o.indexOf(" ")<0&&o.indexOf(",")<0);a.length===e.length&&(this.#s=a)}addTriggerElements(t,e){if(this.#n.contains(e)){e.matches(this.#t)&&t.push(e);for(const n of e.querySelectorAll(this.#t))t.push(n)}}trigger(t){if(document.readyState!=="loading")if(this.#s&&Array.isArray(t))for(const e of t)this.#s.some(n=>e.matches(n))&&this.#o(e);else for(const e of this.#n.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!H(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#a(t)}catch(e){P.error("Failed callback!",t,e)}}}}function H(s){if(!(s instanceof Element))return!1;const{blacklist:t}=v();return t.length>0&&t.some(e=>s.closest(e)!==null)}const $=Array.prototype.every,S=s=>s.nodeType===Node.TEXT_NODE;function C(s){const t=v();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(s),n=[];if(e){for(const a of s){const o=a.target;if(!H(o))switch(a.type){case"attributes":a.oldValue!==o.getAttribute(a.attributeName)&&n.push(a);break;case"childList":(!$.call(a.addedNodes,S)||!$.call(a.removedNodes,S))&&n.push(a);break}}if(n.length===0)return}if(n.length>500&&(t.triggerAll=!0),!t.triggerAll)if(e)for(const a of n){const o=a.target;switch(a.type){case"attributes":t.triggerElements.push(o);break;case"childList":for(const r of t.callbacks)r.addTriggerElements(t.triggerElements,o);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{const a=t.triggerAll?void 0:t.triggerElements;t.triggerAll=!1,t.triggerElements=[],t.triggerFrame=0,t.callbacks.forEach(o=>o.trigger(a))}))}function z(){C(),new MutationObserver(C).observe(document,{attributes:!0,attributeFilter:["class","data-bsp-autosubmit","data-chart-type","data-code-type","data-internal-name","data-tab","name","rel","target"],attributeOldValue:!0,childList:!0,subtree:!0})}function D(){const s=v();s.initialized||(s.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",z):z())}function m(s,t,e){D();let n,a;typeof e<"u"?(n=s,a=t):(n=document,a=s,e=t);const o=new O(n,a,e);o.trigger(),v().callbacks.push(o)}m.triggerCallbacks=C;m.pause=()=>{v().triggerPaused=!0};m.resume=()=>{const s=v();s.triggerPaused=!1,s.triggerOnResume&&(s.triggerOnResume=!1,setTimeout(C,100))};m.ignore=(...s)=>{const{blacklist:t}=v();for(const e of s){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};const{expect:d,userEvent:c,waitFor:u,within:k}=__STORYBOOK_MODULE_TEST__,R={title:"Utilities/onFind",tags:["autodocs"],parameters:{docs:{subtitle:"The `onFind` utility observes DOM mutations and executes callbacks when elements matching specified selectors appear. Uses MutationObserver internally to efficiently track element additions and attribute changes."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for"}},args:{selector:".dynamic-item"}},f={render:s=>{const t=`onfind-${Math.random().toString(36).substring(2,9)}`,e=`.dynamic-item-${t}`;let n=0,a=0;const o=()=>{const i=document.getElementById(`${t}-items-count`),l=document.getElementById(`${t}-found-count`);i&&(i.textContent=String(n)),l&&(l.textContent=String(a))};return b(e,i=>{a++,o(),i.classList.add("ring-2","ring-success-500")}),h`
+import{x as f}from"./iframe-Sf9RHZFu.js";import{l as P,o as b}from"./onFind-C41m8c_a.js";import"./preload-helper-PPVm8Dsz.js";const F=Symbol.for("brightspot.onFind");let y;function v(){return y||(y=globalThis[F],y||(y={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerFrame:0,initialized:!1},globalThis[F]=y),y)}class O{#n;#e;#t;#a;#s;constructor(t,e,n){this.#n=t,this.#e=`data-ofc${v().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(o=>o.indexOf(",")>-1)?o=>o:o=>`${o}:not([${this.#e}])`).join(","),this.#a=n;const a=e.map(o=>o.trim()).filter(o=>o.indexOf(" ")<0&&o.indexOf(",")<0);a.length===e.length&&(this.#s=a)}addTriggerElements(t,e){if(this.#n.contains(e)){e.matches(this.#t)&&t.push(e);for(const n of e.querySelectorAll(this.#t))t.push(n)}}trigger(t){if(document.readyState!=="loading")if(this.#s&&Array.isArray(t))for(const e of t)this.#s.some(n=>e.matches(n))&&this.#o(e);else for(const e of this.#n.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!H(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#a(t)}catch(e){P.error("Failed callback!",t,e)}}}}function H(s){if(!(s instanceof Element))return!1;const{blacklist:t}=v();return t.length>0&&t.some(e=>s.closest(e)!==null)}const $=Array.prototype.every,S=s=>s.nodeType===Node.TEXT_NODE;function C(s){const t=v();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(s),n=[];if(e){for(const a of s){const o=a.target;if(!H(o))switch(a.type){case"attributes":a.oldValue!==o.getAttribute(a.attributeName)&&n.push(a);break;case"childList":(!$.call(a.addedNodes,S)||!$.call(a.removedNodes,S))&&n.push(a);break}}if(n.length===0)return}if(n.length>500&&(t.triggerAll=!0),!t.triggerAll)if(e)for(const a of n){const o=a.target;switch(a.type){case"attributes":t.triggerElements.push(o);break;case"childList":for(const r of t.callbacks)r.addTriggerElements(t.triggerElements,o);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{const a=t.triggerAll?void 0:t.triggerElements;t.triggerAll=!1,t.triggerElements=[],t.triggerFrame=0,t.callbacks.forEach(o=>o.trigger(a))}))}function z(){C(),new MutationObserver(C).observe(document,{attributes:!0,attributeFilter:["class","data-bsp-autosubmit","data-chart-type","data-code-type","data-internal-name","data-tab","name","rel","target"],attributeOldValue:!0,childList:!0,subtree:!0})}function D(){const s=v();s.initialized||(s.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",z):z())}function m(s,t,e){D();let n,a;typeof e<"u"?(n=s,a=t):(n=document,a=s,e=t);const o=new O(n,a,e);o.trigger(),v().callbacks.push(o)}m.triggerCallbacks=C;m.pause=()=>{v().triggerPaused=!0};m.resume=()=>{const s=v();s.triggerPaused=!1,s.triggerOnResume&&(s.triggerOnResume=!1,setTimeout(C,100))};m.ignore=(...s)=>{const{blacklist:t}=v();for(const e of s){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};const{expect:d,userEvent:c,waitFor:u,within:k}=__STORYBOOK_MODULE_TEST__,R={title:"Utilities/onFind",tags:["autodocs"],parameters:{docs:{subtitle:"The `onFind` utility observes DOM mutations and executes callbacks when elements matching specified selectors appear. Uses MutationObserver internally to efficiently track element additions and attribute changes."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for"}},args:{selector:".dynamic-item"}},x={render:s=>{const t=`onfind-${Math.random().toString(36).substring(2,9)}`,e=`.dynamic-item-${t}`;let n=0,a=0;const o=()=>{const i=document.getElementById(`${t}-items-count`),l=document.getElementById(`${t}-found-count`);i&&(i.textContent=String(n)),l&&(l.textContent=String(a))};return b(e,i=>{a++,o(),i.classList.add("ring-2","ring-success-500")}),f`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -8,18 +8,10 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
         </div>
 
         <div class="flex gap-2">
-          <button
-            data-testid="add-item"
-            @click=${()=>{n++;const i=document.getElementById(`${t}-container`);if(i){const l=document.createElement("div");l.className=`dynamic-item-${t} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}o()}}
-            class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white"
-          >
+          <button data-testid="add-item" @click=${()=>{n++;const i=document.getElementById(`${t}-container`);if(i){const l=document.createElement("div");l.className=`dynamic-item-${t} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}o()}} class="btu-button-primary btu-button-sm btu-button">
             Add Item
           </button>
-          <button
-            data-testid="clear-items"
-            @click=${()=>{n=0,a=0;const i=document.getElementById(`${t}-container`);i&&(i.innerHTML=""),o()}}
-            class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
-          >
+          <button data-testid="clear-items" @click=${()=>{n=0,a=0;const i=document.getElementById(`${t}-container`);i&&(i.innerHTML=""),o()}} class="btu-button-gray btu-button-sm btu-button">
             Clear All
           </button>
         </div>
@@ -37,13 +29,13 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
           </div>
           <div>
             <div class="text-xs text-gray-500">Items detected by onFind</div>
-            <div data-testid="found-count" id="${t}-found-count" class="text-primary-600 text-2xl font-bold">
+            <div data-testid="found-count" id="${t}-found-count" class="text-2xl font-bold text-primary-600">
               0
             </div>
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects dynamically added element",async()=>{await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))}),await t("Detects multiple elements",async()=>{await c.click(e.getByTestId("add-item")),await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("3"))}),await t("Clear resets counts",async()=>{await c.click(e.getByTestId("clear-items")),d(e.getByTestId("items-count")).toHaveTextContent("0"),d(e.getByTestId("found-count")).toHaveTextContent("0")}),await t("Detection resumes after clear",async()=>{await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))})}},B={render:()=>{const s="onfind-ignore-demo",t=".ignore-demo-item",e="ignore-demo-zone";let n=0,a=0;const o=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(n))};return b.ignore(`.${e}`),b(t,i=>{n++,o(),i.classList.add("ring-2","ring-success-500")}),h`
+    `},parameters:{docs:{description:{story:"Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects dynamically added element",async()=>{await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))}),await t("Detects multiple elements",async()=>{await c.click(e.getByTestId("add-item")),await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("3"))}),await t("Clear resets counts",async()=>{await c.click(e.getByTestId("clear-items")),d(e.getByTestId("items-count")).toHaveTextContent("0"),d(e.getByTestId("found-count")).toHaveTextContent("0")}),await t("Detection resumes after clear",async()=>{await c.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))})}},B={render:()=>{const s="onfind-ignore-demo",t=".ignore-demo-item",e="ignore-demo-zone";let n=0,a=0;const o=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(n))};return b.ignore(`.${e}`),b(t,i=>{n++,o(),i.classList.add("ring-2","ring-success-500")}),f`
       <div class="space-y-4">
         <p class="text-base">
           Elements added inside the <strong>ignored zone</strong> are skipped by onFind callbacks. Elements added
@@ -51,14 +43,10 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
         </p>
 
         <div class="flex gap-2">
-          <button
-            data-testid="add-outside"
-            @click=${()=>{a++;const i=document.getElementById(`${s}-outside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Outside ${a}`,i.appendChild(l)}}}
-            class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white"
-          >
+          <button data-testid="add-outside" @click=${()=>{a++;const i=document.getElementById(`${s}-outside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Outside ${a}`,i.appendChild(l)}}} class="btu-button-primary btu-button-sm btu-button">
             Add Outside
           </button>
-          <button data-testid="add-inside" @click=${()=>{a++;const i=document.getElementById(`${s}-inside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Inside ${a}`,i.appendChild(l)}}} class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300">
+          <button data-testid="add-inside" @click=${()=>{a++;const i=document.getElementById(`${s}-inside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Inside ${a}`,i.appendChild(l)}}} class="btu-button-gray btu-button-sm btu-button">
             Add Inside Ignored
           </button>
         </div>
@@ -74,7 +62,7 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
             <div class="mb-1 text-xs font-semibold text-gray-500">Ignored zone</div>
             <div
               id="${s}-inside"
-              class="${e} min-h-32 space-y-2 rounded border-2 border-red-300 bg-red-50 p-4"
+              class="${e} border-red-300 bg-red-50 min-h-32 space-y-2 rounded border-2 p-4"
             >
               <div class="text-sm text-gray-400">Items ignored here</div>
             </div>
@@ -86,13 +74,13 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
           <div
             data-testid="ignore-found-count"
             id="${s}-found-count"
-            class="text-primary-600 text-2xl font-bold"
+            class="text-2xl font-bold text-primary-600"
           >
             0
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Demonstrates `onFind.ignore()` — elements inside ignored containers are excluded from callback processing. Useful for skipping rich-text editors or other zones where DOM mutations should not trigger component initialization."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects outside ignored zone",async()=>{await c.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("1"))}),await t("Skips inside ignored zone",async()=>{await c.click(e.getByTestId("add-inside")),await new Promise(n=>requestAnimationFrame(()=>requestAnimationFrame(n))),d(e.getByTestId("ignore-found-count")).toHaveTextContent("1")}),await t("Continues detecting outside",async()=>{await c.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("2"))})}},w={render:()=>{const s="onfind-pause-demo",t=".pause-demo-item";let e=0,n=0;const a=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(e))};b(t,i=>{e++,a(),i.classList.add("ring-2","ring-success-500")});const o=()=>{n++;const i=document.getElementById(`${s}-container`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}};let r=!1;return h`
+    `},parameters:{docs:{description:{story:"Demonstrates `onFind.ignore()` — elements inside ignored containers are excluded from callback processing. Useful for skipping rich-text editors or other zones where DOM mutations should not trigger component initialization."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects outside ignored zone",async()=>{await c.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("1"))}),await t("Skips inside ignored zone",async()=>{await c.click(e.getByTestId("add-inside")),await new Promise(n=>requestAnimationFrame(()=>requestAnimationFrame(n))),d(e.getByTestId("ignore-found-count")).toHaveTextContent("1")}),await t("Continues detecting outside",async()=>{await c.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("2"))})}},I={render:()=>{const s="onfind-pause-demo",t=".pause-demo-item";let e=0,n=0;const a=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(e))};b(t,i=>{e++,a(),i.classList.add("ring-2","ring-success-500")});const o=()=>{n++;const i=document.getElementById(`${s}-container`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}};let r=!1;return f`
       <div class="space-y-4">
         <p class="text-base">
           Use <code>onFind.pause()</code> to temporarily stop detection and <code>onFind.resume()</code> to restart it.
@@ -100,10 +88,10 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
         </p>
 
         <div class="flex gap-2">
-          <button data-testid="pause-add" @click=${o} class="btu-button btu-button-primary btu-button-sm">
+          <button data-testid="pause-add" @click=${o} class="btu-button-primary btu-button-sm btu-button">
             Add Item
           </button>
-          <button data-testid="toggle-pause" @click=${()=>{r=!r,r?b.pause():b.resume();const i=document.querySelector('[data-testid="toggle-pause"]');i&&(i.textContent=r?"Resume":"Pause",i.className=r?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}} class="btu-button btu-button-warning btu-button-sm">
+          <button data-testid="toggle-pause" @click=${()=>{r=!r,r?b.pause():b.resume();const i=document.querySelector('[data-testid="toggle-pause"]');i&&(i.textContent=r?"Resume":"Pause",i.className=r?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}} class="btu-button-warning btu-button-sm btu-button">
             Pause
           </button>
         </div>
@@ -117,13 +105,13 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
           <div
             data-testid="pause-found-count"
             id="${s}-found-count"
-            class="text-primary-600 text-2xl font-bold"
+            class="text-2xl font-bold text-primary-600"
           >
             0
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Demonstrates `onFind.pause()` and `onFind.resume()`. While paused, DOM mutations are queued and processed when resumed."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Normal detection before pause",async()=>{await c.click(e.getByTestId("pause-add")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("1"))}),await t("Pause stops detection",async()=>{await c.click(e.getByTestId("toggle-pause")),await c.click(e.getByTestId("pause-add")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("pause-found-count")).toHaveTextContent("1")}),await t("Resume triggers pending detection",async()=>{await c.click(e.getByTestId("toggle-pause")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("2"),{timeout:2e3})})}},I={render:()=>{const s=b,t=".singleton-item-a",e=".singleton-item-b";let n=0,a=0;const o=()=>{const g=document.getElementById("singleton-count-a"),x=document.getElementById("singleton-count-b");g&&(g.textContent=String(n)),x&&(x.textContent=String(a))};s.ignore(".singleton-ignored-zone"),s(t,g=>{n++,o(),g.classList.add("ring-2","ring-blue-500")}),m(e,g=>{a++,o(),g.classList.add("ring-2","ring-purple-500")});const r=(g,x,M)=>{const A=document.getElementById(M);if(A){const E=document.createElement("div");E.className=`${g.slice(1)} rounded border bg-white p-4`,E.textContent=x,A.appendChild(E)}};let p=!1;return h`
+    `},parameters:{docs:{description:{story:"Demonstrates `onFind.pause()` and `onFind.resume()`. While paused, DOM mutations are queued and processed when resumed."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Normal detection before pause",async()=>{await c.click(e.getByTestId("pause-add")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("1"))}),await t("Pause stops detection",async()=>{await c.click(e.getByTestId("toggle-pause")),await c.click(e.getByTestId("pause-add")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("pause-found-count")).toHaveTextContent("1")}),await t("Resume triggers pending detection",async()=>{await c.click(e.getByTestId("toggle-pause")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("2"),{timeout:2e3})})}},w={render:()=>{const s=b,t=".singleton-item-a",e=".singleton-item-b";let n=0,a=0;const o=()=>{const g=document.getElementById("singleton-count-a"),h=document.getElementById("singleton-count-b");g&&(g.textContent=String(n)),h&&(h.textContent=String(a))};s.ignore(".singleton-ignored-zone"),s(t,g=>{n++,o(),g.classList.add("ring-2","ring-blue-500")}),m(e,g=>{a++,o(),g.classList.add("ring-2","ring-purple-500")});const r=(g,h,M)=>{const A=document.getElementById(M);if(A){const E=document.createElement("div");E.className=`${g.slice(1)} rounded border bg-white p-4`,E.textContent=h,A.appendChild(E)}};let p=!1;return f`
       <div class="space-y-4">
         <p class="text-base">
           Two separate ES module instances of <code>onFind</code> (each with its own <code>_state</code> cache) share
@@ -134,11 +122,11 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
           <button
             data-testid="singleton-toggle-pause"
             @click=${()=>{p=!p,p?s.pause():s.resume();const g=document.querySelector('[data-testid="singleton-toggle-pause"]');g&&(g.textContent=p?"Resume":"Pause",g.className=p?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}}
-            class="btu-button btu-button-warning btu-button-sm"
+            class="btu-button-warning btu-button-sm btu-button"
           >
             Pause
           </button>
-          <div class="flex items-center gap-1 text-sm text-blue-600">
+          <div class="text-blue-600 flex items-center gap-1 text-sm">
             Bundle A:
             <span data-testid="singleton-count-a" id="singleton-count-a" class="font-bold">0</span>
             items found
@@ -152,24 +140,24 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
 
         <div class="grid grid-cols-3 gap-4">
           <div>
-            <div class="mb-2 text-xs font-semibold text-blue-600">Bundle A zone</div>
+            <div class="text-blue-600 mb-2 text-xs font-semibold">Bundle A zone</div>
             <div class="mb-2 flex gap-1">
               <button
                 data-testid="singleton-add-a"
                 @click=${()=>r(t,"Bundle A item","singleton-zone-a")}
-                class="btu-button btu-button-primary btu-button-sm"
+                class="btu-button-primary btu-button-sm btu-button"
               >
                 Add A
               </button>
               <button
                 data-testid="singleton-zone-a-add-b"
                 @click=${()=>r(e,"Bundle B item","singleton-zone-a")}
-                class="btu-button btu-button-purple btu-button-sm"
+                class="btu-button-purple btu-button-sm btu-button"
               >
                 Add B
               </button>
             </div>
-            <div id="singleton-zone-a" class="min-h-24 space-y-2 rounded border-2 border-blue-300 bg-blue-50 p-4">
+            <div id="singleton-zone-a" class="border-blue-300 bg-blue-50 min-h-24 space-y-2 rounded border-2 p-4">
               <div class="text-sm text-gray-400">A items here</div>
             </div>
           </div>
@@ -179,14 +167,14 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
               <button
                 data-testid="singleton-zone-b-add-a"
                 @click=${()=>r(t,"Bundle A item","singleton-zone-b")}
-                class="btu-button btu-button-primary btu-button-sm"
+                class="btu-button-primary btu-button-sm btu-button"
               >
                 Add A
               </button>
               <button
                 data-testid="singleton-add-b"
                 @click=${()=>r(e,"Bundle B item","singleton-zone-b")}
-                class="btu-button btu-button-purple btu-button-sm"
+                class="btu-button-purple btu-button-sm btu-button"
               >
                 Add B
               </button>
@@ -196,26 +184,26 @@ import{x as h}from"./iframe-DloIUNZz.js";import{l as P,o as b}from"./onFind-C0l4
             </div>
           </div>
           <div>
-            <div class="mb-2 text-xs font-semibold text-red-600">Ignored zone</div>
+            <div class="text-red-600 mb-2 text-xs font-semibold">Ignored zone</div>
             <div class="mb-2 flex gap-1">
               <button
                 data-testid="singleton-add-ignored"
                 @click=${()=>{r(t,"Ignored A","singleton-ignored"),r(e,"Ignored B","singleton-ignored")}}
-                class="btu-button btu-button-gray btu-button-sm"
+                class="btu-button-gray btu-button-sm btu-button"
               >
                 Add A & B
               </button>
             </div>
             <div
               id="singleton-ignored"
-              class="singleton-ignored-zone min-h-24 space-y-2 rounded border-2 border-red-300 bg-red-50 p-4"
+              class="singleton-ignored-zone border-red-300 bg-red-50 min-h-24 space-y-2 rounded border-2 p-4"
             >
               <div class="text-sm text-gray-400">Items ignored here</div>
             </div>
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Two independent module instances of `onFind` (simulating separate bundles) share a single MutationObserver, ignore list, and pause/resume state through the `globalThis[Symbol.for()]` singleton pattern."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Shared observer: Bundle A detects A items, Bundle B detects B items",async()=>{await c.click(e.getByTestId("singleton-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("1")),await c.click(e.getByTestId("singleton-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("1"))}),await t("Cross-zone detection fires correct callback",async()=>{await c.click(e.getByTestId("singleton-zone-a-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-a")).toHaveTextContent("1"),await c.click(e.getByTestId("singleton-zone-b-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")}),await t("Shared ignore list: Bundle A ignore() blocks Bundle B callbacks",async()=>{const n=e.getByTestId("singleton-count-a").textContent,a=e.getByTestId("singleton-count-b").textContent;await c.click(e.getByTestId("singleton-add-ignored")),await new Promise(o=>requestAnimationFrame(()=>requestAnimationFrame(o))),d(e.getByTestId("singleton-count-a")).toHaveTextContent(n),d(e.getByTestId("singleton-count-b")).toHaveTextContent(a)}),await t("Ignore lists are merged and deduped across bundles",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")],a=n.blacklist.length;m.ignore(".singleton-ignored-zone"),d(n.blacklist.length).toBe(a),m.ignore(".bundle-b-ignored"),d(n.blacklist).toContain(".singleton-ignored-zone"),d(n.blacklist).toContain(".bundle-b-ignored"),d(n.blacklist.length).toBe(a+1)}),await t("Shared pause/resume: Bundle A pause() stops Bundle B detection",async()=>{await c.click(e.getByTestId("singleton-toggle-pause")),await c.click(e.getByTestId("singleton-add-a")),await c.click(e.getByTestId("singleton-add-b")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("singleton-count-a")).toHaveTextContent("2"),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2"),await c.click(e.getByTestId("singleton-toggle-pause")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("3"),{timeout:2e3}),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("3"),{timeout:2e3})}),await t("No index collision on data-ofc attributes",async()=>{const n=s.querySelectorAll(".singleton-item-a, .singleton-item-b"),a=new Set;n.forEach(o=>{o.getAttributeNames().filter(r=>r.startsWith("data-ofc")).forEach(r=>a.add(r))}),d(a.size).toBeGreaterThanOrEqual(2)}),await t("Singleton state: both bundles share the same globalThis object",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")];d(n).toBeDefined(),d(n.callbacks).toBeDefined(),d(Array.isArray(n.callbacks)).toBe(!0),d(n.initialized).toBe(!0),d(b.pause).not.toBe(m.pause),d(b.resume).not.toBe(m.resume)})}},T={render:()=>h`
+    `},parameters:{docs:{description:{story:"Two independent module instances of `onFind` (simulating separate bundles) share a single MutationObserver, ignore list, and pause/resume state through the `globalThis[Symbol.for()]` singleton pattern."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Shared observer: Bundle A detects A items, Bundle B detects B items",async()=>{await c.click(e.getByTestId("singleton-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("1")),await c.click(e.getByTestId("singleton-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("1"))}),await t("Cross-zone detection fires correct callback",async()=>{await c.click(e.getByTestId("singleton-zone-a-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-a")).toHaveTextContent("1"),await c.click(e.getByTestId("singleton-zone-b-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")}),await t("Shared ignore list: Bundle A ignore() blocks Bundle B callbacks",async()=>{const n=e.getByTestId("singleton-count-a").textContent,a=e.getByTestId("singleton-count-b").textContent;await c.click(e.getByTestId("singleton-add-ignored")),await new Promise(o=>requestAnimationFrame(()=>requestAnimationFrame(o))),d(e.getByTestId("singleton-count-a")).toHaveTextContent(n),d(e.getByTestId("singleton-count-b")).toHaveTextContent(a)}),await t("Ignore lists are merged and deduped across bundles",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")],a=n.blacklist.length;m.ignore(".singleton-ignored-zone"),d(n.blacklist.length).toBe(a),m.ignore(".bundle-b-ignored"),d(n.blacklist).toContain(".singleton-ignored-zone"),d(n.blacklist).toContain(".bundle-b-ignored"),d(n.blacklist.length).toBe(a+1)}),await t("Shared pause/resume: Bundle A pause() stops Bundle B detection",async()=>{await c.click(e.getByTestId("singleton-toggle-pause")),await c.click(e.getByTestId("singleton-add-a")),await c.click(e.getByTestId("singleton-add-b")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("singleton-count-a")).toHaveTextContent("2"),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2"),await c.click(e.getByTestId("singleton-toggle-pause")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("3"),{timeout:2e3}),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("3"),{timeout:2e3})}),await t("No index collision on data-ofc attributes",async()=>{const n=s.querySelectorAll(".singleton-item-a, .singleton-item-b"),a=new Set;n.forEach(o=>{o.getAttributeNames().filter(r=>r.startsWith("data-ofc")).forEach(r=>a.add(r))}),d(a.size).toBeGreaterThanOrEqual(2)}),await t("Singleton state: both bundles share the same globalThis object",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")];d(n).toBeDefined(),d(n.callbacks).toBeDefined(),d(Array.isArray(n.callbacks)).toBe(!0),d(n.initialized).toBe(!0),d(b.pause).not.toBe(m.pause),d(b.resume).not.toBe(m.resume)})}},T={render:()=>f`
     <div class="space-y-4 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Basic Usage</h3>
@@ -348,7 +336,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
         </p>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Code examples and documentation for using the onFind utility."}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the onFind utility."}}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
   render: args => {
     const instanceId = \`onfind-\${Math.random().toString(36).substring(2, 9)}\`;
     const uniqueSelector = \`.dynamic-item-\${instanceId}\`;
@@ -397,18 +385,10 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
         </div>
 
         <div class="flex gap-2">
-          <button
-            data-testid="add-item"
-            @click=\${addItem}
-            class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white"
-          >
+          <button data-testid="add-item" @click=\${addItem} class="btu-button-primary btu-button-sm btu-button">
             Add Item
           </button>
-          <button
-            data-testid="clear-items"
-            @click=\${clearItems}
-            class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
-          >
+          <button data-testid="clear-items" @click=\${clearItems} class="btu-button-gray btu-button-sm btu-button">
             Clear All
           </button>
         </div>
@@ -426,7 +406,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
           </div>
           <div>
             <div class="text-xs text-gray-500">Items detected by onFind</div>
-            <div data-testid="found-count" id="\${instanceId}-found-count" class="text-primary-600 text-2xl font-bold">
+            <div data-testid="found-count" id="\${instanceId}-found-count" class="text-2xl font-bold text-primary-600">
               0
             </div>
           </div>
@@ -465,7 +445,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       await waitFor(() => expect(canvas.getByTestId('found-count')).toHaveTextContent('1'));
     });
   }
-}`,...f.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+}`,...x.parameters?.docs?.source}}};B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
   render: () => {
     const instanceId = 'onfind-ignore-demo';
     const itemSelector = '.ignore-demo-item';
@@ -510,14 +490,10 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
         </p>
 
         <div class="flex gap-2">
-          <button
-            data-testid="add-outside"
-            @click=\${addOutside}
-            class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white"
-          >
+          <button data-testid="add-outside" @click=\${addOutside} class="btu-button-primary btu-button-sm btu-button">
             Add Outside
           </button>
-          <button data-testid="add-inside" @click=\${addInside} class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300">
+          <button data-testid="add-inside" @click=\${addInside} class="btu-button-gray btu-button-sm btu-button">
             Add Inside Ignored
           </button>
         </div>
@@ -533,7 +509,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
             <div class="mb-1 text-xs font-semibold text-gray-500">Ignored zone</div>
             <div
               id="\${instanceId}-inside"
-              class="\${ignoredClass} min-h-32 space-y-2 rounded border-2 border-red-300 bg-red-50 p-4"
+              class="\${ignoredClass} border-red-300 bg-red-50 min-h-32 space-y-2 rounded border-2 p-4"
             >
               <div class="text-sm text-gray-400">Items ignored here</div>
             </div>
@@ -545,7 +521,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
           <div
             data-testid="ignore-found-count"
             id="\${instanceId}-found-count"
-            class="text-primary-600 text-2xl font-bold"
+            class="text-2xl font-bold text-primary-600"
           >
             0
           </div>
@@ -580,7 +556,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       await waitFor(() => expect(canvas.getByTestId('ignore-found-count')).toHaveTextContent('2'));
     });
   }
-}`,...B.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+}`,...B.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
   render: () => {
     const instanceId = 'onfind-pause-demo';
     const itemSelector = '.pause-demo-item';
@@ -627,10 +603,10 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
         </p>
 
         <div class="flex gap-2">
-          <button data-testid="pause-add" @click=\${addItem} class="btu-button btu-button-primary btu-button-sm">
+          <button data-testid="pause-add" @click=\${addItem} class="btu-button-primary btu-button-sm btu-button">
             Add Item
           </button>
-          <button data-testid="toggle-pause" @click=\${togglePause} class="btu-button btu-button-warning btu-button-sm">
+          <button data-testid="toggle-pause" @click=\${togglePause} class="btu-button-warning btu-button-sm btu-button">
             Pause
           </button>
         </div>
@@ -644,7 +620,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
           <div
             data-testid="pause-found-count"
             id="\${instanceId}-found-count"
-            class="text-primary-600 text-2xl font-bold"
+            class="text-2xl font-bold text-primary-600"
           >
             0
           </div>
@@ -683,7 +659,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       });
     });
   }
-}`,...w.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+}`,...I.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   render: () => {
     const onFindA = onFind;
     const selectorA = '.singleton-item-a';
@@ -753,11 +729,11 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
           <button
             data-testid="singleton-toggle-pause"
             @click=\${togglePause}
-            class="btu-button btu-button-warning btu-button-sm"
+            class="btu-button-warning btu-button-sm btu-button"
           >
             Pause
           </button>
-          <div class="flex items-center gap-1 text-sm text-blue-600">
+          <div class="text-blue-600 flex items-center gap-1 text-sm">
             Bundle A:
             <span data-testid="singleton-count-a" id="singleton-count-a" class="font-bold">0</span>
             items found
@@ -771,24 +747,24 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
 
         <div class="grid grid-cols-3 gap-4">
           <div>
-            <div class="mb-2 text-xs font-semibold text-blue-600">Bundle A zone</div>
+            <div class="text-blue-600 mb-2 text-xs font-semibold">Bundle A zone</div>
             <div class="mb-2 flex gap-1">
               <button
                 data-testid="singleton-add-a"
                 @click=\${() => addItem(selectorA, 'Bundle A item', 'singleton-zone-a')}
-                class="btu-button btu-button-primary btu-button-sm"
+                class="btu-button-primary btu-button-sm btu-button"
               >
                 Add A
               </button>
               <button
                 data-testid="singleton-zone-a-add-b"
                 @click=\${() => addItem(selectorB, 'Bundle B item', 'singleton-zone-a')}
-                class="btu-button btu-button-purple btu-button-sm"
+                class="btu-button-purple btu-button-sm btu-button"
               >
                 Add B
               </button>
             </div>
-            <div id="singleton-zone-a" class="min-h-24 space-y-2 rounded border-2 border-blue-300 bg-blue-50 p-4">
+            <div id="singleton-zone-a" class="border-blue-300 bg-blue-50 min-h-24 space-y-2 rounded border-2 p-4">
               <div class="text-sm text-gray-400">A items here</div>
             </div>
           </div>
@@ -798,14 +774,14 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
               <button
                 data-testid="singleton-zone-b-add-a"
                 @click=\${() => addItem(selectorA, 'Bundle A item', 'singleton-zone-b')}
-                class="btu-button btu-button-primary btu-button-sm"
+                class="btu-button-primary btu-button-sm btu-button"
               >
                 Add A
               </button>
               <button
                 data-testid="singleton-add-b"
                 @click=\${() => addItem(selectorB, 'Bundle B item', 'singleton-zone-b')}
-                class="btu-button btu-button-purple btu-button-sm"
+                class="btu-button-purple btu-button-sm btu-button"
               >
                 Add B
               </button>
@@ -815,19 +791,19 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
             </div>
           </div>
           <div>
-            <div class="mb-2 text-xs font-semibold text-red-600">Ignored zone</div>
+            <div class="text-red-600 mb-2 text-xs font-semibold">Ignored zone</div>
             <div class="mb-2 flex gap-1">
               <button
                 data-testid="singleton-add-ignored"
                 @click=\${addIgnored}
-                class="btu-button btu-button-gray btu-button-sm"
+                class="btu-button-gray btu-button-sm btu-button"
               >
                 Add A & B
               </button>
             </div>
             <div
               id="singleton-ignored"
-              class="singleton-ignored-zone min-h-24 space-y-2 rounded border-2 border-red-300 bg-red-50 p-4"
+              class="singleton-ignored-zone border-red-300 bg-red-50 min-h-24 space-y-2 rounded border-2 p-4"
             >
               <div class="text-sm text-gray-400">Items ignored here</div>
             </div>
@@ -924,7 +900,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       expect(onFind.resume).not.toBe(onFindB.resume);
     });
   }
-}`,...I.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="space-y-4 text-sm">
       <div>
@@ -1066,4 +1042,4 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       }
     }
   }
-}`,...T.parameters?.docs?.source}}};const U=["Interactive","Ignore","PauseResume","Singleton","UsageExample"];export{B as Ignore,f as Interactive,w as PauseResume,I as Singleton,T as UsageExample,U as __namedExportsOrder,R as default};
+}`,...T.parameters?.docs?.source}}};const U=["Interactive","Ignore","PauseResume","Singleton","UsageExample"];export{B as Ignore,x as Interactive,I as PauseResume,w as Singleton,T as UsageExample,U as __namedExportsOrder,R as default};

package/dist/storybook/assets/{onRemove.stories-CQ9ZC5dm.js → onRemove.stories-DX58Bf6f.js}

@@ -1,4 +1,4 @@
-import{x as p}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";let l=!1;function m(e,o){const s=new MutationObserver(r=>{for(const v of r)for(const n of v.removedNodes)n.contains(e)&&!l&&(s.disconnect(),o())});s.observe(document,{childList:!0,subtree:!0})}m.pause=()=>{l=!0};m.resume=()=>{l=!1};const b={title:"Utilities/onRemove",tags:["autodocs"],parameters:{docs:{subtitle:"The `onRemove` utility triggers a callback when a DOM element is removed from the document. Uses MutationObserver to watch for removals, with global pause/resume support."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector of element to watch"}},args:{selector:".watched-item"}},i={render:()=>{const e=`onremove-${Math.random().toString(36).substring(2,9)}`;let o=0,s=0;const r=()=>{const n=document.getElementById(`${e}-items-count`),t=document.getElementById(`${e}-removed-count`);n&&(n.textContent=String(o)),t&&(t.textContent=String(s))};return p`
+import{x as p}from"./iframe-Sf9RHZFu.js";import"./preload-helper-PPVm8Dsz.js";let l=!1;function m(e,o){const s=new MutationObserver(r=>{for(const v of r)for(const n of v.removedNodes)n.contains(e)&&!l&&(s.disconnect(),o())});s.observe(document,{childList:!0,subtree:!0})}m.pause=()=>{l=!0};m.resume=()=>{l=!1};const h={title:"Utilities/onRemove",tags:["autodocs"],parameters:{docs:{subtitle:"The `onRemove` utility triggers a callback when a DOM element is removed from the document. Uses MutationObserver to watch for removals, with global pause/resume support."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector of element to watch"}},args:{selector:".watched-item"}},i={render:()=>{const e=`onremove-${Math.random().toString(36).substring(2,9)}`;let o=0,s=0;const r=()=>{const n=document.getElementById(`${e}-items-count`),t=document.getElementById(`${e}-removed-count`);n&&(n.textContent=String(o)),t&&(t.textContent=String(s))};return p`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -8,9 +8,7 @@ import{x as p}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";le
         </div>
 
         <div class="flex gap-2">
-          <button @click=${()=>{o++;const n=document.getElementById(`${e}-container`);if(!n)return;const t=document.createElement("div"),u=o;t.className="flex items-center justify-between rounded border bg-white p-4",t.innerHTML=`<span>Item ${u}</span>`;const d=document.createElement("button");d.className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200",d.textContent="Remove",d.addEventListener("click",()=>t.remove()),t.appendChild(d),n.appendChild(t),m(t,()=>{s++,o--,r();const g=document.getElementById(`${e}-log`);if(g){const c=document.createElement("div");c.className="text-sm text-gray-600",c.textContent=`Item ${u} removed at ${new Date().toLocaleTimeString()}`,g.prepend(c)}}),r()}} class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
-            Add Item
-          </button>
+          <button @click=${()=>{o++;const n=document.getElementById(`${e}-container`);if(!n)return;const t=document.createElement("div"),u=o;t.className="flex items-center justify-between rounded border bg-white p-4",t.innerHTML=`<span>Item ${u}</span>`;const d=document.createElement("button");d.className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200",d.textContent="Remove",d.addEventListener("click",()=>t.remove()),t.appendChild(d),n.appendChild(t),m(t,()=>{s++,o--,r();const g=document.getElementById(`${e}-log`);if(g){const c=document.createElement("div");c.className="text-sm text-gray-600",c.textContent=`Item ${u} removed at ${new Date().toLocaleTimeString()}`,g.prepend(c)}}),r()}} class="btu-button-primary btu-button-sm btu-button">Add Item</button>
         </div>
 
         <div id="${e}-container" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
@@ -24,7 +22,7 @@ import{x as p}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";le
           </div>
           <div>
             <div class="text-xs text-gray-500">Removals detected</div>
-            <div id="${e}-removed-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="${e}-removed-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
@@ -136,9 +134,7 @@ onRemove.resume()</code></pre>
         </div>
 
         <div class="flex gap-2">
-          <button @click=\${addItem} class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
-            Add Item
-          </button>
+          <button @click=\${addItem} class="btu-button-primary btu-button-sm btu-button">Add Item</button>
         </div>
 
         <div id="\${instanceId}-container" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
@@ -152,7 +148,7 @@ onRemove.resume()</code></pre>
           </div>
           <div>
             <div class="text-xs text-gray-500">Removals detected</div>
-            <div id="\${instanceId}-removed-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="\${instanceId}-removed-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
@@ -231,4 +227,4 @@ onRemove.resume()</code></pre>
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};const y=["Interactive","UsageExample"];export{i as Interactive,a as UsageExample,y as __namedExportsOrder,b as default};
+}`,...a.parameters?.docs?.source}}};const y=["Interactive","UsageExample"];export{i as Interactive,a as UsageExample,y as __namedExportsOrder,h as default};

package/dist/storybook/assets/{onVisible.stories-Cbj5_Vz0.js → onVisible.stories-NNFeFeD8.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-DloIUNZz.js";import{o as g}from"./onFind-C0l4Gew0.js";import"./preload-helper-PPVm8Dsz.js";const b=Symbol.for("brightspot.onVisible");let t;function v(){return t||(t=globalThis[b],t||(t={calledIndex:0},globalThis[b]=t),t)}function h(i,r){const s=`_ovc${v().calledIndex++}`,n=new IntersectionObserver(e=>{for(const o of e)if(o.isIntersecting){const c=o.target,m=c.classList;m.contains(s)||(m.add(s),n.unobserve(c),r(c))}});g(i,e=>{n.observe(e)})}const f={title:"Utilities/onVisible",tags:["autodocs"],parameters:{docs:{subtitle:"The `onVisible` utility triggers a callback once when elements matching a selector become visible in the viewport. Combines `onFind` with `IntersectionObserver` for lazy initialization of dynamically added elements."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for visibility"}},args:{selector:".lazy-item"}},l={render:()=>{const i=`onvisible-${Math.random().toString(36).substring(2,9)}`,r=`.lazy-item-${i}`;let s=0;const n=()=>{const e=document.getElementById(`${i}-visible-count`);e&&(e.textContent=String(s))};return h(r,e=>{s++,n(),e.classList.remove("opacity-30"),e.classList.add("ring-2","ring-success-500","opacity-100"),e.textContent+=" — visible!"}),d`
+import{x as d}from"./iframe-Sf9RHZFu.js";import{o as g}from"./onFind-C41m8c_a.js";import"./preload-helper-PPVm8Dsz.js";const b=Symbol.for("brightspot.onVisible");let t;function v(){return t||(t=globalThis[b],t||(t={calledIndex:0},globalThis[b]=t),t)}function h(i,r){const s=`_ovc${v().calledIndex++}`,n=new IntersectionObserver(e=>{for(const o of e)if(o.isIntersecting){const c=o.target,m=c.classList;m.contains(s)||(m.add(s),n.unobserve(c),r(c))}});g(i,e=>{n.observe(e)})}const f={title:"Utilities/onVisible",tags:["autodocs"],parameters:{docs:{subtitle:"The `onVisible` utility triggers a callback once when elements matching a selector become visible in the viewport. Combines `onFind` with `IntersectionObserver` for lazy initialization of dynamically added elements."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for visibility"}},args:{selector:".lazy-item"}},l={render:()=>{const i=`onvisible-${Math.random().toString(36).substring(2,9)}`,r=`.lazy-item-${i}`;let s=0;const n=()=>{const e=document.getElementById(`${i}-visible-count`);e&&(e.textContent=String(s))};return h(r,e=>{s++,n(),e.classList.remove("opacity-30"),e.classList.add("ring-2","ring-success-500","opacity-100"),e.textContent+=" — visible!"}),d`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -10,7 +10,7 @@ import{x as d}from"./iframe-DloIUNZz.js";import{o as g}from"./onFind-C0l4Gew0.js
         <div class="flex justify-around">
           <div>
             <div class="text-xs text-gray-500">Items detected as visible</div>
-            <div id="${i}-visible-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="${i}-visible-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
@@ -101,7 +101,7 @@ onVisible('.chart-container', (element) => {
         <div class="flex justify-around">
           <div>
             <div class="text-xs text-gray-500">Items detected as visible</div>
-            <div id="\${instanceId}-visible-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="\${instanceId}-visible-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 

package/dist/storybook/assets/{style-map-DLXysq3r.js → style-map-B99QiqCo.js}

@@ -1 +1 @@
-import{e as l,ae as u,af as c,ag as a}from"./iframe-DloIUNZz.js";const o="important",d=" !"+o,h=l(class extends u{constructor(s){if(super(s),s.type!==c.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce(((n,t)=>{const e=s[t];return e==null?n:n+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(s,[n]){const{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(const e of this.ft)n[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(const e in n){const r=n[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(d);e.includes("-")||i?t.setProperty(e,i?r.slice(0,-11):r,i?o:""):t[e]=r}}return a}});export{h as o};
+import{e as l,ae as u,af as c,ag as a}from"./iframe-Sf9RHZFu.js";const o="important",d=" !"+o,h=l(class extends u{constructor(s){if(super(s),s.type!==c.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce(((n,t)=>{const e=s[t];return e==null?n:n+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(s,[n]){const{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(const e of this.ft)n[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(const e in n){const r=n[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(d);e.includes("-")||i?t.setProperty(e,i?r.slice(0,-11):r,i?o:""):t[e]=r}}return a}});export{h as o};