lyco 1.2.3 → 1.2.5

package/dist/index.cjs.js

@@ -1,4 +1,7 @@
-var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`lit`));function l(e){return e?typeof e==`function`?e():e:c.html``}function u(e,t){let n=t??(e=>e);if(e===void 0)return c.html``;if(Array.isArray(e))return e.map((e,t)=>n(l(e),t,!0,!1));if(typeof e!=`function`)return n(l(e),void 0,!1,!1);let r=e();return Array.isArray(r)?r.map((e,t)=>n(l(e),t,!0,!1)):n(l(r),void 0,!1,!0)}function d(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function f(e,t){let n=t??(e=>e),r=e=>n(l(e));return e?r(e):r}function p(e,t,n){let r=t??(e=>e),i=e=>r(u(e,n));return e?i(e):i}const m=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),h={"GridBreakpoint::grid-breakpoint":m(`grid-breakpoint`),"Hidden::hidden-container":m(`hidden-container`),"ListGroup::list-group":m(`list-group`),"ScrollBar::scrollbar-container":m(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":m(`skeleton-shimmer`),"Swiper::swiper":m(`swiper`),"Table::table":m(`table`),"WaterFlow::waterflow":m(`waterflow`),"AutoFitGrid::auto-fit-grid":m(`auto-fit-grid`),"GridCol::grid-col":m(`grid-col`),"GridRow::grid-row":m(`grid-row`)};function g(e){let t=h[e];return t.init||(h[e].init=!0,h[e].className=d(t.prefix)),h[e].className===`___LYCO_NULL___`?d(t.prefix):h[e].className}function _(e,t){if(t===void 0){let t=t=>_(e,t??c.html``);return t.html=(t,...n)=>_(e,(0,c.html)(t,...n)),t}let n=e?.fadeBg??`rgba(0,0,0,0.7)`,r=e?.zIndex??2e3;return c.html`
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`lit`));function l(e){return e?typeof e==`function`?e():e:c.html``}function u(e,t){let n=t??(e=>e);if(e===void 0)return c.html``;if(Array.isArray(e))return e.map((e,t)=>n(l(e),t,!0,!1));if(typeof e!=`function`)return n(l(e),void 0,!1,!1);let r=e();return Array.isArray(r)?r.map((e,t)=>n(l(e),t,!0,!1)):n(l(r),void 0,!1,!0)}function d(e){let t=Math.random().toString(36).substring(2,15);return e?`lyco-${e}-${t}`:`lyco-${t}`}function f(e,t){let n=t??(e=>e),r=e=>n(l(e));return e?r(e):r}function p(e,t,n){let r=t??(e=>e),i=e=>r(u(e,n));return e?i(e):i}const m=e=>({init:!1,prefix:e,className:`___LYCO_NULL___`}),h={"GridBreakpoint::grid-breakpoint":m(`grid-breakpoint`),"Hidden::hidden-container":m(`hidden-container`),"ListGroup::list-group":m(`list-group`),"ScrollBar::scrollbar-container":m(`scrollbar-container`),"SkeletonLoader::skeleton-shimmer":m(`skeleton-shimmer`),"Swiper::swiper":m(`swiper`),"Table::table":m(`table`),"WaterFlow::waterflow":m(`waterflow`),"AutoFitGrid::auto-fit-grid":m(`auto-fit-grid`),"GridCol::grid-col":m(`grid-col`),"GridRow::grid-row":m(`grid-row`)};function g(e){let t=h[e];return t.init||(h[e].init=!0,h[e].className=d(t.prefix)),h[e].className===`___LYCO_NULL___`?d(t.prefix):h[e].className}const _={all:{value:0}};function v(e){var t;return(t=_[e])?.value||(_[e]={value:0}),_[e].value}function y(e,t){return _.all={value:_.all.value+1},_[e]===void 0?_[e]={value:0}:_[e].value=_[e].value+1,console.debug(`LycoComponent: ${e} - ${_[e].value} - ${_.all.value}`),c.html`
+		<!-- ${e} - ${_[e].value} -->
+		${t}
+	`}function b(e,t){if(t===void 0){let t=t=>b(e,t??c.html``);return t.html=(t,...n)=>b(e,(0,c.html)(t,...n)),t}let n=e?.fadeBg??`rgba(0,0,0,0.7)`,r=e?.zIndex??2e3;return c.html`
 		<div
 			style="
       position: fixed;
@@ -12,7 +15,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function v(e,t){return t===void 0?t=>v(e,t??[c.html``]):c.html`
+	`}function x(e,t){return t===void 0?t=>x(e,t??[c.html``]):c.html`
 		<div
 			style="
       display: flex;
@@ -22,7 +25,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function y(e,t){if(t===void 0){let t=t=>y(e,t??c.html``);return t.html=(t,...n)=>y(e,(0,c.html)(t,...n)),t}let n=e?.direction??`row`;return c.html`
+	`}function S(e,t){if(t===void 0){let t=t=>S(e,t??c.html``);return t.html=(t,...n)=>S(e,(0,c.html)(t,...n)),t}let n=e?.direction??`row`;return c.html`
 		<div
 			style="
       display: flex;
@@ -34,11 +37,11 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function b(e){return c.html`
+	`}function C(e){return c.html`
 		<div style="break-inside: avoid; margin-bottom: 16px;">
 			${l(e)}
 		</div>
-	`}function x(e,t){if(t===void 0)return t=>x(e,t??[c.html``]);let n=e?.columns??1;return c.html`
+	`}function w(e,t){if(t===void 0)return t=>w(e,t??[c.html``]);let n=e?.columns??1;return c.html`
 		<div
 			style="
       display: grid;
@@ -48,33 +51,33 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function S(e,t){if(t===void 0){let t=t=>S(e,t??c.html``);return t.html=(t,...n)=>S(e,(0,c.html)(t,...n)),t}let n=g(`GridCol::grid-col`),r=e?.gap?`column-gap: ${e.gap};`:``,i=`
-      .${n} {
+	`}function T(e,t){if(t===void 0){let t=t=>T(e,t??c.html``);return t.html=(t,...n)=>T(e,(0,c.html)(t,...n)),t}let n=v(`GridCol`),r=g(`GridCol::grid-col`)+`-lyco-now-`+n,i=e?.gap?`column-gap: ${e.gap};`:``,a=`
+      .${r} {
         display: grid;
         grid-auto-flow: column;
-        ${r}
+        ${i}
       }
-    `;return c.html`
-		<style>
-			${i}
-		</style>
-		<div class="${n}">${l(t)}</div>
-	`}function C(e,t){if(t===void 0){let t=t=>C(e,t??c.html``);return t.html=(t,...n)=>C(e,(0,c.html)(t,...n)),t}return c.html`
+    `;return y(`GridCol`,c.html`
+			<style>
+				${a}
+			</style>
+			<div class="${r}">${l(t)}</div>
+		`)}function E(e,t){if(t===void 0){let t=t=>E(e,t??c.html``);return t.html=(t,...n)=>E(e,(0,c.html)(t,...n)),t}return c.html`
 		<div style="${e?.span?`grid-column: span ${e.span};`:``}">
 			${l(t)}
 		</div>
-	`}function w(e,t){if(t===void 0){let t=t=>w(e,t??c.html``);return t.html=(t,...n)=>w(e,(0,c.html)(t,...n)),t}let n=g(`GridRow::grid-row`),r=e?.gap?`row-gap: ${e.gap};`:``,i=`
-      .${n} {
+	`}function D(e,t){if(t===void 0){let t=t=>D(e,t??c.html``);return t.html=(t,...n)=>D(e,(0,c.html)(t,...n)),t}let n=v(`GridRow`),r=g(`GridRow::grid-row`)+`-lyco-now-`+n,i=e?.gap?`row-gap: ${e.gap};`:``,a=`
+      .${r} {
         display: grid;
         grid-auto-flow: row;
-        ${r}
+        ${i}
       }
-    `;return c.html`
-		<style>
-			${i}
-		</style>
-		<div class="${n}">${l(t)}</div>
-	`}function T(e,t){return t===void 0?t=>T(e,t??[c.html``]):c.html`
+    `;return y(`GridRow`,c.html`
+			<style>
+				${a}
+			</style>
+			<div class="${r}">${l(t)}</div>
+		`)}function O(e,t){return t===void 0?t=>O(e,t??[c.html``]):c.html`
 		<div
 			style="
       display: flex;
@@ -84,35 +87,24 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function E(e,t){if(t===void 0){let t=t=>E(e,t??c.html``);return t.html=(t,...n)=>E(e,(0,c.html)(t,...n)),t}let n=e?.columnCount??3,r=e?.gap??`16px`,i=g(`WaterFlow::waterflow`);return c.html`
-		<style>
-			/* 使用 CSS 类来控制多列布局 */
-			.${i} {
-				column-count: ${n};
-				column-gap: ${typeof r==`number`?`${r}px`:r};
-			}
-			/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
-			.${i} > * {
-				display: inline-block;
-				width: 100%;
-			}
-		</style>
+	`}function k(e,t){if(t===void 0){let t=t=>k(e,t??c.html``);return t.html=(t,...n)=>k(e,(0,c.html)(t,...n)),t}let n=e?.columnCount??3,r=e?.gap??`16px`,i=v(`WaterFlow`),a=g(`WaterFlow::waterflow`)+`-lyco-now-${i}`,o=`
+	/* 使用 CSS 类来控制多列布局 */
+	.${a} {
+		column-count: ${n};
+		column-gap: ${typeof r==`number`?`${r}px`:r};
+	}
+	/* 子元素如果是块级元素，需要让它们适应多列流式布局 */
+	.${a} > * {
+		display: inline-block;
+		width: 100%;
+	}
+	`;return y(`WaterFlow`,c.html`
+			<style>
+				${o}
+			</style>
 
-		<div class="${i}">${l(t)}</div>
-	`}E().html`
-<div>
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-  <div>6</div>
-  <div>7</div>
-  <div>8</div>
-  <div>9</div>
-  <div>10</div>
-</div>
-`;function D(e,t){if(t===void 0){let t=t=>D(e,t??c.html``);return t.html=(t,...n)=>D(e,(0,c.html)(t,...n)),t}let n=e?.gap??`0px`,r=e?.firstHeight??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
+			<div class="${a}">${l(t)}</div>
+		`)}function A(e,t){if(t===void 0){let t=t=>A(e,t??c.html``);return t.html=(t,...n)=>A(e,(0,c.html)(t,...n)),t}let n=e?.gap??`0px`,r=e?.firstHeight??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -125,7 +117,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
 		</div>
-	`}function O(e,t){if(t===void 0){let t=t=>O(e,t??c.html``);return t.html=(t,...n)=>O(e,(0,c.html)(t,...n)),t}let n=e?.gap??`0px`,r=e?.firstWidth??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
+	`}function j(e,t){if(t===void 0){let t=t=>j(e,t??c.html``);return t.html=(t,...n)=>j(e,(0,c.html)(t,...n)),t}let n=e?.gap??`0px`,r=e?.firstWidth??`50%`,i=c.html``,a=c.html``;if(typeof t==`function`){var o;let e=(o=t.call)?.call(t,null)??[];i=e[0]??c.html``,a=e[1]??c.html``}else i=l(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -138,28 +130,30 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${r}; overflow: auto;">${i}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${a}</div>
 		</div>
-	`}function k(e,t){if(t===void 0){let t=t=>k(e,t??c.html``);return t.html=(t,...n)=>k(e,(0,c.html)(t,...n)),t}let n=e?.direction??`vertical`,r=e?.height??`100%`,i=e?.width??`100%`,a=e?.customCss??``,o=e?.className??g(`ScrollBar::scrollbar-container`),s=n===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`;return c.html`
-		<style>
-			.${o} {
-			  ${s};
-			  width: ${i};
-			  height: ${r};
-			}
-			.${o}::-webkit-scrollbar {
-			  width: 8px;
-			  height: 8px;
-			}
-			.${o}::-webkit-scrollbar-thumb {
-			  background-color: rgba(0, 0, 0, 0.2);
-			  border-radius: 4px;
-			}
-			.${o}::-webkit-scrollbar-track {
-			  background: rgba(0, 0, 0, 0.05);
-			}
-			${a}
-		</style>
-		<div class="${o}">${l(t)}</div>
-	`}function A(e,t){if(t===void 0)return t=>A(e,t??[c.html``]);let n=e?.sidebarWidth??`240px`,r=e?.sidebarPosition??`left`,i=e?.gap??`0px`,a=c.html``,o=c.html``;if(typeof t==`function`){var s;let e=(s=t.call)?.call(t,null)??[];a=e[0]??c.html``,o=e[1]??c.html``}else o=u(t);return c.html`
+	`}function M(e,t){if(t===void 0){let t=t=>M(e,t??c.html``);return t.html=(t,...n)=>M(e,(0,c.html)(t,...n)),t}let n=e?.direction??`vertical`,r=e?.height??`100%`,i=e?.width??`100%`,a=e?.customCss??``,o=v(`ScrollBar`),s=e?.className??g(`ScrollBar::scrollbar-container`)+`-lyco-now-`+o,u=n===`horizontal`?`overflow-x: auto; overflow-y: hidden`:`overflow-y: auto; overflow-x: hidden`,d=`
+	.${s} {
+	  ${u};
+	  width: ${i};
+	  height: ${r};
+	}
+	.${s}::-webkit-scrollbar {
+	  width: 8px;
+	  height: 8px;
+	}
+	.${s}::-webkit-scrollbar-thumb {
+	  background-color: rgba(0, 0, 0, 0.2);
+	  border-radius: 4px;
+	}
+	.${s}::-webkit-scrollbar-track {
+	  background: rgba(0, 0, 0, 0.05);
+	}
+	${a}
+	`;return y(`ScrollBar`,c.html`
+			<style>
+				${d}
+			</style>
+			<div class="${s}">${l(t)}</div>
+		`)}function N(e,t){if(t===void 0)return t=>N(e,t??[c.html``]);let n=e?.sidebarWidth??`240px`,r=e?.sidebarPosition??`left`,i=e?.gap??`0px`,a=c.html``,o=c.html``;if(typeof t==`function`){var s;let e=(s=t.call)?.call(t,null)??[];a=e[0]??c.html``,o=e[1]??c.html``}else o=u(t);return c.html`
 		<div
 			style="
       display: flex;
@@ -172,156 +166,158 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			<div style="flex: 0 0 ${n}; overflow: auto;">${a}</div>
 			<div style="flex: 1 1 auto; overflow: auto;">${o}</div>
 		</div>
-	`}function j(e={},t){if(t===void 0)return t=>j(e,t??[c.html``]);let{gap:n=`8px`,snapType:r=`mandatory`,height:i=`auto`,width:a=`100%`,className:o=g(`Swiper::swiper`),direction:s=`x`,scrollBehavior:l=`smooth`,align:u=`start`,showNavigation:d=!0,navigationPosition:f=`inside`,showPagination:p=!0,paginationType:m=`dots`,autoPlay:h=!1,interval:_=3e3,loop:v=!1,touchEnabled:y=!0,mouseWheel:b=!1,onSlideChange:x}=e,S=o,C=S+`-container`,w=S+`-slide`,T=S+`-navigation`,E=S+`-pagination`,D;D=t?typeof t==`function`?t():t:[];let O=D.length,[k,A]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,O-1));e.value!==n&&(e.value=n,x?.(n))}]})(),M=e=>{let t=typeof document<`u`?document.querySelector(`.${C}`):null;if(!t)return;let n=t.querySelectorAll(`.${w}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;s===`x`?(o=r.offsetLeft-t.offsetLeft,u===`center`?o-=(a.width-i.width)/2:u===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:l})):(o=r.offsetTop-t.offsetTop,u===`center`?o-=(a.height-i.height)/2:u===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:l})),A(e)},N=()=>{let e=k()+1>=O?v?0:k():k()+1;M(e)},P=()=>{let e=k()-1<0?v?O-1:k():k()-1;M(e)},F=()=>{let e=typeof document<`u`?document.querySelector(`.${C}`):null;if(!e)return;let t=e.querySelectorAll(`.${w}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),c;if(s===`x`){let e=a.left+a.width/2-(o.left+o.width/2);c=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);c=Math.abs(e)}c<r&&(r=c,n=i)}),A(n)},I=e=>{if(!y)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},L=e=>{if(!y)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||s===`x`)&&e.preventDefault()},R=e=>{if(!y)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,c=Math.max(Math.abs(a),Math.abs(o))>30;c&&(s===`x`?a>0?P():N():o>0?P():N()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},z=e=>{b&&(e.preventDefault(),e.deltaY>0?N():P())},B=e=>{if(!h||!e)return;let t,n=()=>{t=setInterval(N,_)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},V=()=>{let e=typeof document<`u`?document.querySelector(`.${C}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,F),t.push(()=>e.removeEventListener(`scroll`,F)),y&&(e.addEventListener(`touchstart`,I),e.addEventListener(`touchmove`,L,{passive:!1}),e.addEventListener(`touchend`,R),t.push(()=>e.removeEventListener(`touchstart`,I)),t.push(()=>e.removeEventListener(`touchmove`,L)),t.push(()=>e.removeEventListener(`touchend`,R))),b&&(e.addEventListener(`wheel`,z,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,z)));let n=B(e);return n&&t.push(n),M(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(V,0);let H=c.html`
-		<div class="${E}">
-			${Array.from({length:O},(e,t)=>c.html`
+	`}function P(e={},t){if(t===void 0)return t=>P(e,t??[c.html``]);let n=v(`Swiper`),{gap:r=`8px`,snapType:i=`mandatory`,height:a=`auto`,width:o=`100%`,className:s=g(`Swiper::swiper`)+`-lyco-now-${n}`,direction:l=`x`,scrollBehavior:u=`smooth`,align:d=`start`,showNavigation:f=!0,navigationPosition:p=`inside`,showPagination:m=!0,paginationType:h=`dots`,autoPlay:_=!1,interval:b=3e3,loop:x=!1,touchEnabled:S=!0,mouseWheel:C=!1,onSlideChange:w}=e,T=s,E=T+`-container`,D=T+`-slide`,O=T+`-navigation`,k=T+`-pagination`,A;A=t?typeof t==`function`?t():t:[];let j=A.length,[M,N]=(()=>{let e={value:0};return[()=>e.value,t=>{let n=Math.max(0,Math.min(t,j-1));e.value!==n&&(e.value=n,w?.(n))}]})(),F=e=>{let t=typeof document<`u`?document.querySelector(`.${E}`):null;if(!t)return;let n=t.querySelectorAll(`.${D}`);if(e<0||e>=n.length)return;let r=n[e],i=r.getBoundingClientRect(),a=t.getBoundingClientRect(),o;l===`x`?(o=r.offsetLeft-t.offsetLeft,d===`center`?o-=(a.width-i.width)/2:d===`end`&&(o-=a.width-i.width),t.scrollTo({left:o,behavior:u})):(o=r.offsetTop-t.offsetTop,d===`center`?o-=(a.height-i.height)/2:d===`end`&&(o-=a.height-i.height),t.scrollTo({top:o,behavior:u})),N(e)},I=()=>{let e=M()+1>=j?x?0:M():M()+1;F(e)},L=()=>{let e=M()-1<0?x?j-1:M():M()-1;F(e)},R=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=e.querySelectorAll(`.${D}`),n=0,r=1/0;t.forEach((t,i)=>{let a=t.getBoundingClientRect(),o=e.getBoundingClientRect(),s;if(l===`x`){let e=a.left+a.width/2-(o.left+o.width/2);s=Math.abs(e)}else{let e=a.top+a.height/2-(o.top+o.height/2);s=Math.abs(e)}s<r&&(r=s,n=i)}),N(n)},z=e=>{if(!S)return;let t=e.touches[0],n=e.currentTarget;n.dataset.touchStartX=t.clientX.toString(),n.dataset.touchStartY=t.clientY.toString()},B=e=>{if(!S)return;let t=e.touches[0],n=e.currentTarget,r=parseFloat(n.dataset.touchStartX||`0`),i=parseFloat(n.dataset.touchStartY||`0`),a=t.clientX-r,o=t.clientY-i;(Math.abs(a)>Math.abs(o)||l===`x`)&&e.preventDefault()},V=e=>{if(!S)return;let t=e.currentTarget,n=parseFloat(t.dataset.touchStartX||`0`),r=parseFloat(t.dataset.touchStartY||`0`);if(!n&&!r)return;let i=e.changedTouches[0],a=i.clientX-n,o=i.clientY-r,s=Math.max(Math.abs(a),Math.abs(o))>30;s&&(l===`x`?a>0?L():I():o>0?L():I()),delete t.dataset.touchStartX,delete t.dataset.touchStartY},H=e=>{C&&(e.preventDefault(),e.deltaY>0?I():L())},U=e=>{if(!_||!e)return;let t,n=()=>{t=setInterval(I,b)},r=()=>{clearInterval(t)};return e.addEventListener(`mouseenter`,r),e.addEventListener(`mouseleave`,n),n(),()=>{clearInterval(t),e.removeEventListener(`mouseenter`,r),e.removeEventListener(`mouseleave`,n)}},W=()=>{let e=typeof document<`u`?document.querySelector(`.${E}`):null;if(!e)return;let t=[];e.addEventListener(`scroll`,R),t.push(()=>e.removeEventListener(`scroll`,R)),S&&(e.addEventListener(`touchstart`,z),e.addEventListener(`touchmove`,B,{passive:!1}),e.addEventListener(`touchend`,V),t.push(()=>e.removeEventListener(`touchstart`,z)),t.push(()=>e.removeEventListener(`touchmove`,B)),t.push(()=>e.removeEventListener(`touchend`,V))),C&&(e.addEventListener(`wheel`,H,{passive:!1}),t.push(()=>e.removeEventListener(`wheel`,H)));let n=U(e);return n&&t.push(n),F(0),()=>t.forEach(e=>e())};typeof window<`u`&&typeof document<`u`&&setTimeout(W,0);let G=c.html`
+		<div class="${k}">
+			${Array.from({length:j},(e,t)=>c.html`
 					<button
-						class="${t===k()?`active`:``}"
-						@click=${()=>M(t)}
+						class="${t===M()?`active`:``}"
+						@click=${()=>F(t)}
 					></button>
 				`)}
 		</div>
-	`,U=c.html`
-		<div class="${E} fraction">
-			<span class="current">${k()+1}</span>
+	`,K=c.html`
+		<div class="${k} fraction">
+			<span class="current">${M()+1}</span>
 			<span class="separator">/</span>
-			<span class="total">${O}</span>
+			<span class="total">${j}</span>
 		</div>
-	`,W=c.html`
-		<div class="${E} progressbar">
+	`,q=c.html`
+		<div class="${k} progressbar">
 			<div
 				class="progress"
-				style="width: ${O>1?k()/(O-1)*100:0}%"
+				style="width: ${j>1?M()/(j-1)*100:0}%"
 			></div>
 		</div>
-	`,G=c.html`
-		<div class="${T}">
-			<button class="prev" @click=${P}>◀</button>
-			<button class="next" @click=${N}>▶</button>
+	`,J=c.html`
+		<div class="${O}">
+			<button class="prev" @click=${L}>◀</button>
+			<button class="next" @click=${I}>▶</button>
 		</div>
-	`;return c.html`
-		<style>
-			.${S} {
-				position: relative;
-				overflow: hidden;
-				width: ${a};
-				height: ${i};
-			}
+	`,Y=`
+	.${T} {
+		position: relative;
+		overflow: hidden;
+		width: ${o};
+		height: ${a};
+	}
 
-			.${C} {
-				width: 100%;
-				height: 100%;
-				overflow: auto;
-				scroll-snap-type: ${s+` `+r};
-				-webkit-overflow-scrolling: touch;
-				scroll-behavior: ${l};
-				gap: ${n};
-				display: flex;
-				flex-direction: ${s===`x`?`row`:`column`};
-			}
+	.${E} {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		scroll-snap-type: ${l+` `+i};
+		-webkit-overflow-scrolling: touch;
+		scroll-behavior: ${u};
+		gap: ${r};
+		display: flex;
+		flex-direction: ${l===`x`?`row`:`column`};
+	}
 
-			.${w} {
-				scroll-snap-align: ${u};
-				flex-shrink: 0;
-			}
+	.${D} {
+		scroll-snap-align: ${d};
+		flex-shrink: 0;
+	}
 
-			.${T} {
-				position: absolute;
-				top: 50%;
-				left: 0;
-				right: 0;
-				transform: translateY(-50%);
-				display: flex;
-				justify-content: space-between;
-				pointer-events: none;
-				padding: ${f===`outside`?`0 1rem`:`0 0.5rem`};
-			}
+	.${O} {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		transform: translateY(-50%);
+		display: flex;
+		justify-content: space-between;
+		pointer-events: none;
+		padding: ${p===`outside`?`0 1rem`:`0 0.5rem`};
+	}
 
-			.${T} button {
-				width: 2.5rem;
-				height: 2.5rem;
-				border-radius: 50%;
-				background-color: rgba(0, 0, 0, 0.5);
-				color: white;
-				border: none;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-				pointer-events: auto;
-				transition: background-color 0.3s;
-			}
+	.${O} button {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: white;
+		border: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		pointer-events: auto;
+		transition: background-color 0.3s;
+	}
 
-			.${T} button:hover {
-				background-color: rgba(0, 0, 0, 0.8);
-			}
+	.${O} button:hover {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
 
-			.${E} {
-				position: absolute;
-				bottom: 1rem;
-				left: 0;
-				right: 0;
-				display: flex;
-				justify-content: center;
-				gap: 0.5rem;
-				align-items: center;
-			}
-			.${E} button {
-				width: 0.75rem;
-				height: 0.75rem;
-				border-radius: 50%;
-				background-color: rgba(255, 255, 255, 0.5);
-				border: none;
-				cursor: pointer;
-				transition: background-color 0.3s, transform 0.3s;
-			}
-			.${E} button.active {
-				background-color: white;
-				transform: scale(1.2);
-			}
+	.${k} {
+		position: absolute;
+		bottom: 1rem;
+		left: 0;
+		right: 0;
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		align-items: center;
+	}
+	.${k} button {
+		width: 0.75rem;
+		height: 0.75rem;
+		border-radius: 50%;
+		background-color: rgba(255, 255, 255, 0.5);
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.3s, transform 0.3s;
+	}
+	.${k} button.active {
+		background-color: white;
+		transform: scale(1.2);
+	}
 
-			.${E}.fraction {
-				position: absolute;
-				bottom: 1rem;
-				left: 50%;
-				transform: translateX(-50%);
-				color: white;
-				font-size: 1rem;
-				display: flex;
-				align-items: center;
-				gap: 0.25rem;
-			}
+	.${k}.fraction {
+		position: absolute;
+		bottom: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+		color: white;
+		font-size: 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
 
-			.${E}.progressbar {
-				position: absolute;
-				bottom: 0.5rem;
-				left: 0;
-				right: 0;
-				height: 0.25rem;
-				background-color: rgba(255, 255, 255, 0.2);
-			}
-			.${E}.progressbar .progress {
-				height: 100%;
-				background-color: white;
-				transition: width 0.3s;
-			}
-		</style>
+	.${k}.progressbar {
+		position: absolute;
+		bottom: 0.5rem;
+		left: 0;
+		right: 0;
+		height: 0.25rem;
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+	.${k}.progressbar .progress {
+		height: 100%;
+		background-color: white;
+		transition: width 0.3s;
+	}
+	`;return y(`Swiper`,c.html`
+			<style>
+				${Y}
+			</style>
 
-		<div class="${S}">
-			<div class="${C}">
-				${D.map((e,t)=>c.html`
-						<div class="${w} --slide-${t}" key=${t}>
-							${e}
-						</div>
-					`)}
-			</div>
+			<div class="${T}">
+				<div class="${E}">
+					${A.map((e,t)=>c.html`
+							<div class="${D} --slide-${t}" key=${t}>
+								${e}
+							</div>
+						`)}
+				</div>
 
-			${d?G:null}
-			${p&&m===`dots`?H:null}
-			${p&&m===`fraction`?U:null}
-			${p&&m===`progressbar`?W:null}
-		</div>
-	`}function M(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.right?`right: ${e.right};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,a=e?.left?`left: ${e.left};`:``,o=e?.width?`width: ${e.width};`:``,s=e?.height?`height: ${e.height};`:``,u=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,d=e?.style?e.style:``,p=e?.className?e.className:``,m=e=>c.html`
+				${f?J:null}
+				${m&&h===`dots`?G:null}
+				${m&&h===`fraction`?K:null}
+				${m&&h===`progressbar`?q:null}
+			</div>
+		`)}function F(e,t){let n=e?.top?`top: ${e.top};`:``,r=e?.right?`right: ${e.right};`:``,i=e?.bottom?`bottom: ${e.bottom};`:``,a=e?.left?`left: ${e.left};`:``,o=e?.width?`width: ${e.width};`:``,s=e?.height?`height: ${e.height};`:``,u=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``,d=e?.style?e.style:``,p=e?.className?e.className:``,m=e=>c.html`
 			<div
 				class="${p}"
 				style="
@@ -334,7 +330,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			>
 				${l(e)}
 			</div>
-		`;return f(t,m)}function N(e,t){let n=e?.width??`300px`,r=e?.height??`auto`,i=e?.top??`20%`,a=e?.bottom??`auto`,o=e?.left??`50%`,s=e?.right??`auto`,l=o===`auto`?``:`transform: translateX(-50%);`,u=e?.background??`rgba(255, 255, 255, 0.3)`,d=e?.blur??`10px`,f=e?.borderRadius??`12px`,m=e?.padding??`16px`,h=e?.zIndex??1e3,g=e=>c.html`
+		`;return f(t,m)}function I(e,t){let n=e?.width??`300px`,r=e?.height??`auto`,i=e?.top??`20%`,a=e?.bottom??`auto`,o=e?.left??`50%`,s=e?.right??`auto`,l=o===`auto`?``:`transform: translateX(-50%);`,u=e?.background??`rgba(255, 255, 255, 0.3)`,d=e?.blur??`10px`,f=e?.borderRadius??`12px`,m=e?.padding??`16px`,h=e?.zIndex??1e3,g=e=>c.html`
 			<div
 				style="
       position: fixed;
@@ -358,7 +354,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 			>
 				${e}
 			</div>
-		`;return p(t,void 0,g)}function P(e,t){if(t===void 0)return t=>P(e,t??[c.html``]);let n=`${100/e.ratio}%`,r=e.maxWidth?`max-width: ${e.maxWidth};`:``,i=e.background?`background: ${e.background};`:``,a=e.overflow??`hidden`;return c.html`
+		`;return p(t,void 0,g)}function L(e,t){if(t===void 0)return t=>L(e,t??[c.html``]);let n=`${100/e.ratio}%`,r=e.maxWidth?`max-width: ${e.maxWidth};`:``,i=e.background?`background: ${e.background};`:``,a=e.overflow??`hidden`;return c.html`
 		<div
 			style="
       position: relative;
@@ -381,18 +377,18 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				${u(t)}
 			</div>
 		</div>
-	`}function F(e,t){if(t===void 0){let t=t=>F(e,t);return t.html=(t,...n)=>F(e,(0,c.html)(t,...n)),t}let n=g(`AutoFitGrid::auto-fit-grid`),r=e?.gap??`16px`,i=`
-      .${n} {
+	`}function R(e,t){if(t===void 0){let t=t=>R(e,t);return t.html=(t,...n)=>R(e,(0,c.html)(t,...n)),t}let n=v(`AutoFitGrid`),r=g(`AutoFitGrid::auto-fit-grid`)+`-lyco-now-`+n,i=e?.gap??`16px`,a=`
+      .${r} {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(${e.minItemWidth}, 1fr));
-        gap: ${r};
+        gap: ${i};
       }
-    `;return c.html`
-		<style>
-			${i}
-		</style>
-		<div class="${n}">${l(t)}</div>
-	`}function I(e,t){if(t===void 0)return t=>I(e,t??[c.html``]);let n=e?.size??`32px`,r=e?.overlap??`-8px`,i=(e,t)=>c.html`
+    `;return y(`AutoFitGrid`,c.html`
+			<style>
+				${a}
+			</style>
+			<div class="${r}">${l(t)}</div>
+		`)}function z(e,t){if(t===void 0)return t=>z(e,t??[c.html``]);let n=e?.size??`32px`,r=e?.overlap??`-8px`,i=(e,t)=>c.html`
 		<div
 			style="
               width: ${n};
@@ -410,7 +406,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		<div style="display: flex; align-items: center;">
 			${u(t,i)}
 		</div>
-	`}function L(e,t){if(t===void 0){let t=t=>L(e,t??c.html``);return t.html=(t,...n)=>L(e,(0,c.html)(t,...n)),t}let n=e?.position??`top-right`,r=e?.size??`16px`,i=e?.background??`red`,a=e?.color??`#fff`,[o,s,u,d]=[n.includes(`top`)?`0`:`auto`,n.includes(`right`)?`0`:`auto`,n.includes(`bottom`)?`0`:`auto`,n.includes(`left`)?`0`:`auto`];return c.html`
+	`}function B(e,t){if(t===void 0){let t=t=>B(e,t??c.html``);return t.html=(t,...n)=>B(e,(0,c.html)(t,...n)),t}let n=e?.position??`top-right`,r=e?.size??`16px`,i=e?.background??`red`,a=e?.color??`#fff`,[o,s,u,d]=[n.includes(`top`)?`0`:`auto`,n.includes(`right`)?`0`:`auto`,n.includes(`bottom`)?`0`:`auto`,n.includes(`left`)?`0`:`auto`];return c.html`
 		<div style="position: relative; display: inline-block;">
 			${l(t)}
 			<div
@@ -435,7 +431,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				${e?.content??``}
 			</div>
 		</div>
-	`}function R(e,t){if(t===void 0)return t=>R(e,t??[c.html``]);let n=e?.padding??`16px`,r=e?.borderRadius??`8px`,i=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,a=e?.background??`#fff`;return c.html`
+	`}function V(e,t){if(t===void 0)return t=>V(e,t??[c.html``]);let n=e?.padding??`16px`,r=e?.borderRadius??`8px`,i=e?.shadow??`0 2px 8px rgba(0,0,0,0.1)`,a=e?.background??`#fff`;return c.html`
 		<div
 			style="
       background: ${a};
@@ -447,7 +443,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function z(e,t){if(t===void 0){let t=t=>z(e,t??c.html``);return t.html=(t,...n)=>z(e,(0,c.html)(t,...n)),t}let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
+	`}function H(e,t){if(t===void 0){let t=t=>H(e,t??c.html``);return t.html=(t,...n)=>H(e,(0,c.html)(t,...n)),t}let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
 		<div
 			style="
       display: flex;
@@ -458,7 +454,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function B(e,t){if(t===void 0)return t=>B(e,t??[c.html``]);let n=e?.maxWidth??`1024px`,r=e?.padding??`0 16px`,i=e?.background?`background: ${e.background};`:``,a=e?.fullHeight?`height: 100%;`:``;return c.html`
+	`}function U(e,t){if(t===void 0)return t=>U(e,t??[c.html``]);let n=e?.maxWidth??`1024px`,r=e?.padding??`0 16px`,i=e?.background?`background: ${e.background};`:``,a=e?.fullHeight?`height: 100%;`:``;return c.html`
 		<div
 			style="
       width: 100%;
@@ -473,7 +469,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function V(e){let t=e?.orientation??`horizontal`,n=e?.thickness??`1px`,r=e?.color??`#e0e0e0`,i=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),a=t===`horizontal`?`width: 100%; height: ${n}; background: ${r}; margin: ${i};`:`width: ${n}; height: 100%; background: ${r}; margin: ${i};`;return c.html`<div style="${a}"></div>`}function H(e,t){if(t===void 0){let t=t=>H(e,t??c.html``);return t.html=(t,...n)=>H(e,(0,c.html)(t,...n)),t}let n=e?.columns??4,r=e?.gap??`24px`,i=e?.background??`#f8f8f8`,a=e?.padding??`40px 16px`;return c.html`
+	`}function W(e){let t=e?.orientation??`horizontal`,n=e?.thickness??`1px`,r=e?.color??`#e0e0e0`,i=e?.margin??(t===`horizontal`?`8px 0`:`0 8px`),a=t===`horizontal`?`width: 100%; height: ${n}; background: ${r}; margin: ${i};`:`width: ${n}; height: 100%; background: ${r}; margin: ${i};`;return c.html`<div style="${a}"></div>`}function G(e,t){if(t===void 0){let t=t=>G(e,t??c.html``);return t.html=(t,...n)=>G(e,(0,c.html)(t,...n)),t}let n=e?.columns??4,r=e?.gap??`24px`,i=e?.background??`#f8f8f8`,a=e?.padding??`40px 16px`;return c.html`
 		<div
 			style="
       width: 100%;
@@ -495,22 +491,21 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				© ${new Date().getFullYear()} Your Company. All rights reserved.
 			</div>
 		</div>
-	`}function U(e,t){if(t===void 0){let t=t=>U(e,t??c.html``);return t.html=(t,...n)=>U(e,(0,c.html)(t,...n)),t}let n=e.defaultColumns??1,r=e.gap??`16px`,i=e.className??g(`GridBreakpoint::grid-breakpoint`),a=Object.entries(e.breakpoints).map(([e,t])=>`
-      @media ${e} {
-        .${i} { grid-template-columns: repeat(${t}, 1fr); }
-      }
-    `).join(`
-`);return c.html`
-		<style>
-			.${i} {
-			  display: grid;
-			  grid-template-columns: repeat(${n}, 1fr);
-			  gap: ${r};
-			}
-			${a}
-		</style>
-		<div class="${i}">${l(t)}</div>
-	`}function W(e,t){if(t===void 0)return t=>W(e,t??[c.html``]);let n=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,r=e?.height??`400px`,i=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return c.html`
+	`}function K(e,t){if(t===void 0){let t=t=>K(e,t??c.html``);return t.html=(t,...n)=>K(e,(0,c.html)(t,...n)),t}let n=e.defaultColumns??1,r=e.gap??`16px`,i=v(`GridBreakpoint`),a=e.className??g(`GridBreakpoint::grid-breakpoint`)+`-lyco-now-`+i,o=Object.entries(e.breakpoints).map(([e,t])=>`@media`+e+`{
+`+a+`{ grid-template-columns: repeat(`+t+`, 1fr); }
+}`).join(`
+`),s=`
+	.${a} {
+	  display: grid;
+	  grid-template-columns: repeat(${n}, 1fr);
+	  gap: ${r};
+	}
+	${o}`;return y(`GridBreakpoint`,c.html`
+			<style>
+				${s}
+			</style>
+			<div class="${a}">${l(t)}</div>
+		`)}function q(e,t){if(t===void 0)return t=>q(e,t??[c.html``]);let n=e?.backgroundImage?`background-image: url('${e.backgroundImage}');`:``,r=e?.height??`400px`,i=e?.overlayColor??`rgba(0, 0, 0, 0.3)`;return c.html`
 		<div
 			style="
       position: relative;
@@ -547,37 +542,40 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 				${u(t)}
 			</div>
 		</div>
-	`}function G(e,t){if(t===void 0){let t=t=>G(e,t??c.html``);return t.html=(t,...n)=>G(e,(0,c.html)(t,...n)),t}let n=e?.breakpoint??`(max-width: 600px)`,r=e?.mode??`hide`,i=e?.className??g(`Hidden::hidden-container`),a=r===`hide`?`@media ${n} { .${i} { display: none !important; } }`:`@media ${n} { .${i} { display: block !important; } }
-       @media not ${n} { .${i} { display: none !important; } }`;return c.html`
-		<style>
-			.${i} {
-			  display: block;
-			}
-			${a}
-		</style>
-		<div class="${i}">${l(t)}</div>
-	`}function K(e,t){let n=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,r=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,i=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,a=e?.className??g(`ListGroup::list-group`),o=(e,t,n,r)=>n?c.html` <li>${e}</li> `:e,s=t=>c.html`
-		<style>
-			ul.${a} {
-			  list-style: none;
-			  margin: 0;
-			  padding: 0;
-			  ${n};
-			}
-			ul.${a} li {
-			  padding: 12px 16px;
-			  ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
-			}
-			ul.${a} li:last-child {
-			  ${e?.bordered?`border-bottom: none`:``};
-			}
-			${r}
-			${i}
-		</style>
-		<ul class="${a}">
-			${u(t,o)}
-		</ul>
-	`;return p(t,s)}function q(e,t){if(t===void 0)return t=>q(e,t??[c.html``]);let n=e?.background??`rgba(0, 0, 0, 0.5)`,r=e?.zIndex??1e3,i=e?.fullScreen!==!1;return c.html`
+	`}function J(e,t){if(t===void 0){let t=t=>J(e,t??c.html``);return t.html=(t,...n)=>J(e,(0,c.html)(t,...n)),t}let n=e?.breakpoint??`(max-width: 600px)`,r=e?.mode??`hide`,i=v(`Hidden`),a=e?.className??g(`Hidden::hidden-container`)+`-lyco-now-`+i,o=r===`hide`?`@media ${n} { .${a} { display: none !important; } }`:`@media ${n} { .${a} { display: block !important; } }
+       @media not ${n} { .${a} { display: none !important; } }`,s=`
+	.${a} {
+	  display: block;
+	}
+	${o}`;return y(`Hidden`,c.html`
+			<style>
+				${s}
+			</style>
+			<div class="${a}">${l(t)}</div>
+		`)}function Y(e,t){let n=e?.bordered?`border: 1px solid #ddd; border-radius: 4px`:``,r=e?.striped?`li:nth-child(even) { background: #f9f9f9; }`:``,i=e?.hover?`li:hover { background: #f1f1f1; cursor: pointer; }`:``,a=v(`ListGroup`),o=e?.className??g(`ListGroup::list-group`)+`-lyco-now-`+a,s=(e,t,n,r)=>n?c.html` <li>${e}</li> `:e,l=`
+	ul.${o} {
+	  list-style: none;
+	  margin: 0;
+	  padding: 0;
+	  ${n};
+	}
+	ul.${o} li {
+	  padding: 12px 16px;
+	  ${e?.bordered?`border-bottom: 1px solid #ddd`:``};
+	}
+	ul.${o} li:last-child {
+	  ${e?.bordered?`border-bottom: none`:``};
+	}
+	${r}
+	${i}
+	`,d=e=>y(`ListGroup`,c.html`
+				<style>
+					${l}
+				</style>
+				<ul class="${o}">
+					${u(e,s)}
+				</ul>
+			`);return p(t,d)}function X(e,t){if(t===void 0)return t=>X(e,t??[c.html``]);let n=e?.background??`rgba(0, 0, 0, 0.5)`,r=e?.zIndex??1e3,i=e?.fullScreen!==!1;return c.html`
 		<div
 			style="
       position: ${i?`fixed`:`absolute`};
@@ -591,7 +589,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function J(e,t){if(t===void 0){let t=t=>J(e,t??c.html``);return t.html=(t,...n)=>J(e,(0,c.html)(t,...n)),t}let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
+	`}function Z(e,t){if(t===void 0){let t=t=>Z(e,t??c.html``);return t.html=(t,...n)=>Z(e,(0,c.html)(t,...n)),t}let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;return c.html`
 		<div
 			style="
       position: relative;
@@ -601,23 +599,23 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function Y(e){let t=e?.width?`width: ${e.width};`:``,n=e?.height?`height: ${e.height};`:``;return c.html` <div style="${t} ${n}"></div> `}function ee(e){let t=e?.type??`rect`,n=e?.width??`100%`,r=e?.height??`16px`,i=e?.borderRadius??`4px`,a=e?.animation!==!1,o=e?.className??g(`SkeletonLoader::skeleton-shimmer`),s=t===`circle`?`border-radius: 50%; width: ${n}; height: ${n}`:`border-radius: ${i}; width: ${n}; height: ${r}`;return c.html`
-		<style>
-			${`
-            @keyframes ${o+`-shimmer`} {
-			  0% { background-color: #eee; }
-			  50% { background-color: #ddd; }
-			  100% { background-color: #eee; }
-			}    
-            `}
-			.${o} {
-			  ${s};
-			  background-color: #eee;
-			  ${a?`animation: ${o+`-shimmer`} 1.2s infinite ease-in-out`:``};
-			}
-		</style>
-		<div class="${o}"></div>
-	`}function te(){return c.html`<div style="flex: 1 1 auto;"></div>`}function X(e,t){if(t===void 0){let t=t=>X(e,t??c.html``);return t.html=(t,...n)=>X(e,(0,c.html)(t,...n)),t}let n=e?.top?`top: ${e.top};`:``,r=e?.bottom?`bottom: ${e.bottom};`:``,i=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
+	`}function ee(e){let t=e?.width?`width: ${e.width};`:``,n=e?.height?`height: ${e.height};`:``;return c.html` <div style="${t} ${n}"></div> `}function te(e){let t=e?.type??`rect`,n=e?.width??`100%`,r=e?.height??`16px`,i=e?.borderRadius??`4px`,a=e?.animation!==!1,o=v(`SkeletonLoader`),s=e?.className??g(`SkeletonLoader::skeleton-shimmer`)+`-lyco-now-`+o,l=t===`circle`?`border-radius: 50%; width: ${n}; height: ${n}`:`border-radius: ${i}; width: ${n}; height: ${r}`;return y(`SkeletonLoader`,c.html`
+			<style>
+				${`
+	@keyframes ${s+`-shimmer`} {
+	  0% { background-color: #eee; }
+	  50% { background-color: #ddd; }
+	  100% { background-color: #eee; }
+	}    
+	`}
+				.${s} {
+				  ${l};
+				  background-color: #eee;
+				  ${a?`animation: ${s+`-shimmer`} 1.2s infinite ease-in-out`:``};
+				}
+			</style>
+			<div class="${s}"></div>
+		`)}function ne(){return c.html`<div style="flex: 1 1 auto;"></div>`}function Q(e,t){if(t===void 0){let t=t=>Q(e,t??c.html``);return t.html=(t,...n)=>Q(e,(0,c.html)(t,...n)),t}let n=e?.top?`top: ${e.top};`:``,r=e?.bottom?`bottom: ${e.bottom};`:``,i=typeof e?.zIndex==`number`?`z-index: ${e.zIndex};`:``;return c.html`
 		<div
 			style="
       position: sticky;
@@ -627,35 +625,37 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${l(t)}
 		</div>
-	`}function Z(e,t){if(t===void 0){let t=t=>Z(e,t??c.html``);return t.html=(t,...n)=>Z(e,(0,c.html)(t,...n)),t}let n=e?.className??g(`Table::table`),r=e?.striped?`
-      .${n} tr:nth-child(even) { background: #f9f9f9; }
-    `:``,i=e?.hover?`
-      .${n} tr:hover { background: #f1f1f1; }
-    `:``,a=e?.bordered?`
-      .${n}, .${n} th, .${n} td { border: 1px solid #ddd; }
-    `:``;return c.html`
-		<style>
-			/* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
-			.${n} table {
-			  width: 100%;
-			  border-collapse: collapse;
-			}
-			.${n} th,
-			.${n} td {
-			  padding: 8px 12px;
-			  text-align: left;
-			}
-			${r}
-			${i}
-			${a}
-		</style>
+	`}function $(e,t){if(t===void 0){let t=t=>$(e,t??c.html``);return t.html=(t,...n)=>$(e,(0,c.html)(t,...n)),t}let n=v(`Table`),r=e?.className??g(`Table::table`)+`-lyco-now-${n}`,i=e?.striped?`
+      .${r} tr:nth-child(even) { background: #f9f9f9; }
+    `:``,a=e?.hover?`
+      .${r} tr:hover { background: #f1f1f1; }
+    `:``,o=e?.bordered?`
+      .${r}, .${r} th, .${r} td { border: 1px solid #ddd; }
+    `:``,s=`
+	/* 将表格包裹在带有 _className 的 div 里，使后续 CSS 作用于该 div 下的 table */
+	.${r} table {
+	  width: 100%;
+	  border-collapse: collapse;
+	}
+	.${r} th,
+	.${r} td {
+	  padding: 8px 12px;
+	  text-align: left;
+	}
+	${i}
+	${a}
+	${o}
+	`;return y(`Table`,c.html`
+			<style>
+				${s}
+			</style>
 
-		<div class="${n}">
-			<table>
-				${l(t)}
-			</table>
-		</div>
-	`}function Q(e,t){let n=e?.direction??`row`;return t===void 0?t=>Q(e,t??c.html``):c.html`
+			<div class="${r}">
+				<table>
+					${l(t)}
+				</table>
+			</div>
+		`)}function re(e,t){let n=e?.direction??`row`;return t===void 0?t=>re(e,t??c.html``):c.html`
 		<div
 			style="
       display: flex;
@@ -668,7 +668,7 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}function $(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;if(t===void 0)return t=>$(e,t??[c.html``]);let a=`flex-start`,o=`flex-start`;switch(e?.align){case`top-right`:a=`flex-end`,o=`flex-start`;break;case`center`:a=`center`,o=`center`;break;case`bottom-left`:a=`flex-start`,o=`flex-end`;break;case`bottom-right`:a=`flex-end`,o=`flex-end`;break;default:a=`flex-start`,o=`flex-start`}return c.html`
+	`}function ie(e,t){let n=e?.width?`width: ${e.width};`:``,r=e?.height?`height: ${e.height};`:``,i=e?.background?`background: ${e.background};`:``;if(t===void 0)return t=>ie(e,t??[c.html``]);let a=`flex-start`,o=`flex-start`;switch(e?.align){case`top-right`:a=`flex-end`,o=`flex-start`;break;case`center`:a=`center`,o=`center`;break;case`bottom-left`:a=`flex-start`,o=`flex-end`;break;case`bottom-right`:a=`flex-end`,o=`flex-end`;break;default:a=`flex-start`,o=`flex-start`}return c.html`
 		<div
 			style="
       position: relative;
@@ -680,5 +680,5 @@ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=
 		>
 			${u(t)}
 		</div>
-	`}exports.AbsoluteBox=M,exports.AcrylicBar=N,exports.AspectRatio=P,exports.AutoFitGrid=F,exports.AvatarStack=I,exports.Badge=L,exports.Card=R,exports.Center=z,exports.Column=v,exports.ColumnSplit=D,exports.Container=B,exports.Divider=V,exports.Flex=y,exports.FlowItem=b,exports.FooterLayout=H,exports.Grid=x,exports.GridBreakpoint=U,exports.GridCol=S,exports.GridItem=C,exports.GridRow=w,exports.HeroSection=W,exports.Hidden=G,exports.LightboxContainer=_,exports.ListGroup=K,exports.Overlay=q,exports.PositionContainer=J,exports.Row=T,exports.RowSplit=O,exports.ScrollBar=k,exports.SideBarContainer=A,exports.SizedBox=Y,exports.SkeletonLoader=ee,exports.Spacer=te,exports.Sticky=X,exports.Swiper=j,exports.Table=Z,exports.WaterFlow=E,exports.Wrap=Q,exports.ZStack=$;
+	`}exports.AbsoluteBox=F,exports.AcrylicBar=I,exports.AspectRatio=L,exports.AutoFitGrid=R,exports.AvatarStack=z,exports.Badge=B,exports.Card=V,exports.Center=H,exports.Column=x,exports.ColumnSplit=A,exports.Container=U,exports.Divider=W,exports.Flex=S,exports.FlowItem=C,exports.FooterLayout=G,exports.Grid=w,exports.GridBreakpoint=K,exports.GridCol=T,exports.GridItem=E,exports.GridRow=D,exports.HeroSection=q,exports.Hidden=J,exports.LightboxContainer=b,exports.ListGroup=Y,exports.Overlay=X,exports.PositionContainer=Z,exports.Row=O,exports.RowSplit=j,exports.ScrollBar=M,exports.SideBarContainer=N,exports.SizedBox=ee,exports.SkeletonLoader=te,exports.Spacer=ne,exports.Sticky=Q,exports.Swiper=P,exports.Table=$,exports.WaterFlow=k,exports.Wrap=re,exports.ZStack=ie;
 //# sourceMappingURL=index.cjs.js.map