text: import{S as t,i as e,s as a,v as s,e as o,f as r,g as n,h as c,j as i,w as l,k as f,y as $,a7 as d,x as m,z as p,t as u,T as h,U as g,l as b,a as x,d as v,q as E,J as y,K as w,o as I,p as A,H as j,ao as B,c as N,b as O,m as C,n as T,I as P,u as S,B as Y,E as k,F as D,G as X,a3 as _}from"./client.ba230517.js";import{M as H}from"./MDXLayout.aa0fcd4f.js";import{A as M}from"./Avatar.f87a2cd7.js";import"./Meta.c9337a1c.js";import"./Table.012c45d1.js";import{E as G,s as V}from"./Playground.9638741d.js";import{A as z}from"./API.22f0ea38.js";const q=t=>({}),F=t=>({});function J(t){let e,a,x,v,E,y,w;const B=t[13].badge,N=s(B,t,t[12],F),O=N||function(t){let e;return{c(){e=I(t[1])},l(a){e=A(a,t[1])},m(t,a){f(t,e,a)},p(t,a){2&a&&j(e,t[1])},d(t){t&&c(e)}}}(t);return{c(){e=o("span"),O&&O.c(),this.h()},l(t){e=r(t,"SPAN",{class:!0,role:!0,"aria-label":!0,"aria-live":!0,"aria-atomic":!0});var a=n(e);O&&O.l(a),a.forEach(c),this.h()},h(){i(e,"class",a="s-badge__badge "+t[0]),i(e,"role","status"),i(e,"aria-label",t[8]),i(e,"aria-live","polite"),i(e,"aria-atomic","true"),l(e,"bordered",t[3]),l(e,"dot",t[4]),l(e,"tile",t[5]),l(e,"bottom",t[6]),l(e,"left",t[7])},m(a,s){f(a,e,s),O&&O.m(e,null),E=!0,y||(w=$(x=d.call(null,e,{"badge-offset-x":t[10]+"px","badge-offset-y":t[11]+"px"})),y=!0)},p(t,s){N?N.p&&4096&s&&m(N,B,t,t[12],s,q,F):O&&O.p&&2&s&&O.p(t,s),(!E||1&s&&a!==(a="s-badge__badge "+t[0]))&&i(e,"class",a),(!E||256&s)&&i(e,"aria-label",t[8]),x&&p(x.update)&&3072&s&&x.update.call(null,{"badge-offset-x":t[10]+"px","badge-offset-y":t[11]+"px"}),9&s&&l(e,"bordered",t[3]),17&s&&l(e,"dot",t[4]),33&s&&l(e,"tile",t[5]),65&s&&l(e,"bottom",t[6]),129&s&&l(e,"left",t[7])},i(a){E||(u(O,a),h(()=>{v||(v=g(e,t[9],{},!0)),v.run(1)}),E=!0)},o(a){b(O,a),v||(v=g(e,t[9],{},!1)),v.run(0),E=!1},d(t){t&&c(e),O&&O.d(t),t&&v&&v.end(),y=!1,w()}}}function K(t){let e,a,l,$;const d=t[13].default,p=s(d,t,t[12],null);let h=t[2]&&J(t);return{c(){e=o("span"),p&&p.c(),a=x(),l=o("span"),h&&h.c(),this.h()},l(t){e=r(t,"SPAN",{class:!0});var s=n(e);p&&p.l(s),a=v(s),l=r(s,"SPAN",{class:!0});var o=n(l);h&&h.l(o),o.forEach(c),s.forEach(c),this.h()},h(){i(l,"class","s-badge__wrapper"),i(e,"class","s-badge")},m(t,s){f(t,e,s),p&&p.m(e,null),E(e,a),E(e,l),h&&h.m(l,null),$=!0},p(t,[e]){p&&p.p&&4096&e&&m(p,d,t,t[12],e,null,null),t[2]?h?(h.p(t,e),4&e&&u(h,1)):(h=J(t),h.c(),u(h,1),h.m(l,null)):h&&(y(),b(h,1,1,()=>{h=null}),w())},i(t){$||(u(p,t),u(h),$=!0)},o(t){b(p,t),b(h),$=!1},d(t){t&&c(e),p&&p.d(t),h&&h.d()}}}function L(t,e,a){let{$$slots:s={},$$scope:o}=e,{class:r=""}=e,{value:n=""}=e,{active:c=!0}=e,{bordered:i=!1}=e,{dot:l=!1}=e,{tile:f=!1}=e,{bottom:$=!1}=e,{left:d=!1}=e,{label:m="Badge"}=e,{transition:p=B}=e,{offsetX:u=6}=e,{offsetY:h=6}=e;return t.$$set=t=>{"class"in t&&a(0,r=t.class),"value"in t&&a(1,n=t.value),"active"in t&&a(2,c=t.active),"bordered"in t&&a(3,i=t.bordered),"dot"in t&&a(4,l=t.dot),"tile"in t&&a(5,f=t.tile),"bottom"in t&&a(6,$=t.bottom),"left"in t&&a(7,d=t.left),"label"in t&&a(8,m=t.label),"transition"in t&&a(9,p=t.transition),"offsetX"in t&&a(10,u=t.offsetX),"offsetY"in t&&a(11,h=t.offsetY),"$$scope"in t&&a(12,o=t.$$scope)},[r,n,c,i,l,f,$,d,m,p,u,h,o,s]}class U extends t{constructor(t){super(),e(this,t,L,K,a,{class:0,value:1,active:2,bordered:3,dot:4,tile:5,bottom:6,left:7,label:8,transition:9,offsetX:10,offsetY:11})}}function Q(t){let e,a;return e=new P({props:{class:"mdi mdi-home"}}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p:S,i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}function R(t){let e,a;return e=new P({props:{class:"mdi mdi-account"}}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p:S,i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}function W(t){let e,a,s,l,$;return a=new U({props:{class:"success-color",value:2,$$slots:{default:[Q]},$$scope:{ctx:t}}}),l=new U({props:{class:"primary-color",dot:!0,left:!0,$$slots:{default:[R]},$$scope:{ctx:t}}}),{c(){e=o("div"),N(a.$$.fragment),s=x(),N(l.$$.fragment),this.h()},l(t){e=r(t,"DIV",{class:!0});var o=n(e);O(a.$$.fragment,o),s=v(o),O(l.$$.fragment,o),o.forEach(c),this.h()},h(){i(e,"class","d-flex pt-4 pb-4 justify-space-around")},m(t,o){f(t,e,o),C(a,e,null),E(e,s),C(l,e,null),$=!0},p(t,[e]){const s={};1&e&&(s.$$scope={dirty:e,ctx:t}),a.$set(s);const o={};1&e&&(o.$$scope={dirty:e,ctx:t}),l.$set(o)},i(t){$||(u(a.$$.fragment,t),u(l.$$.fragment,t),$=!0)},o(t){b(a.$$.fragment,t),b(l.$$.fragment,t),$=!1},d(t){t&&c(e),T(a),T(l)}}}function Z(t){let e;return{c(){e=I("Notify")},l(t){e=A(t,"Notify")},m(t,a){f(t,e,a)},d(t){t&&c(e)}}}function tt(t){let e;return{c(){e=I("Clear Notifications")},l(t){e=A(t,"Clear Notifications")},m(t,a){f(t,e,a)},d(t){t&&c(e)}}}function et(t){let e,a;return e=new P({props:{class:"mdi mdi-home"}}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p:S,i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}function at(t){let e,a,s,l,$,d,m;return a=new Y({props:{class:"success-color",$$slots:{default:[Z]},$$scope:{ctx:t}}}),a.$on("click",t[1]),l=new Y({props:{class:"error-color",$$slots:{default:[tt]},$$scope:{ctx:t}}}),l.$on("click",t[2]),d=new U({props:{class:"primary-color",active:0!==t[0],value:t[0],$$slots:{default:[et]},$$scope:{ctx:t}}}),{c(){e=o("div"),N(a.$$.fragment),s=x(),N(l.$$.fragment),$=x(),N(d.$$.fragment),this.h()},l(t){e=r(t,"DIV",{class:!0});var o=n(e);O(a.$$.fragment,o),s=v(o),O(l.$$.fragment,o),$=v(o),O(d.$$.fragment,o),o.forEach(c),this.h()},h(){i(e,"class","d-flex pt-4 pb-4 justify-space-around align-center")},m(t,o){f(t,e,o),C(a,e,null),E(e,s),C(l,e,null),E(e,$),C(d,e,null),m=!0},p(t,[e]){const s={};8&e&&(s.$$scope={dirty:e,ctx:t}),a.$set(s);const o={};8&e&&(o.$$scope={dirty:e,ctx:t}),l.$set(o);const r={};1&e&&(r.active=0!==t[0]),1&e&&(r.value=t[0]),8&e&&(r.$$scope={dirty:e,ctx:t}),d.$set(r)},i(t){m||(u(a.$$.fragment,t),u(l.$$.fragment,t),u(d.$$.fragment,t),m=!0)},o(t){b(a.$$.fragment,t),b(l.$$.fragment,t),b(d.$$.fragment,t),m=!1},d(t){t&&c(e),T(a),T(l),T(d)}}}function st(t,e,a){let s=1;return[s,()=>{a(0,s+=1)},()=>{a(0,s=0)}]}function ot(t){let e;return{c(){e=I("Button")},l(t){e=A(t,"Button")},m(t,a){f(t,e,a)},d(t){t&&c(e)}}}function rt(t){let e,a,s;return a=new P({props:{class:"mdi mdi-lock"}}),{c(){e=o("span"),N(a.$$.fragment),this.h()},l(t){e=r(t,"SPAN",{slot:!0});var s=n(e);O(a.$$.fragment,s),s.forEach(c),this.h()},h(){i(e,"slot","badge")},m(t,o){f(t,e,o),C(a,e,null),s=!0},p:S,i(t){s||(u(a.$$.fragment,t),s=!0)},o(t){b(a.$$.fragment,t),s=!1},d(t){t&&c(e),T(a)}}}function nt(t){let e,a,s;return e=new Y({props:{class:"error-color",$$slots:{default:[ot]},$$scope:{ctx:t}}}),{c(){N(e.$$.fragment),a=x()},l(t){O(e.$$.fragment,t),a=v(t)},m(t,o){C(e,t,o),f(t,a,o),s=!0},p(t,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:t}),e.$set(s)},i(t){s||(u(e.$$.fragment,t),s=!0)},o(t){b(e.$$.fragment,t),s=!1},d(t){T(e,t),t&&c(a)}}}function ct(t){let e,a;return{c(){e=o("img"),this.h()},l(t){e=r(t,"IMG",{src:!0,alt:!0}),this.h()},h(){e.src!==(a="//picsum.photos/50")&&i(e,"src","//picsum.photos/50"),i(e,"alt","profile")},m(t,a){f(t,e,a)},d(t){t&&c(e)}}}function it(t){let e,a;return e=new M({props:{$$slots:{default:[ct]},$$scope:{ctx:t}}}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p(t,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:t}),e.$set(s)},i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}function lt(t){let e,a;return{c(){e=o("img"),this.h()},l(t){e=r(t,"IMG",{src:!0,alt:!0}),this.h()},h(){e.src!==(a="//picsum.photos/50")&&i(e,"src","//picsum.photos/50"),i(e,"alt","profile")},m(t,a){f(t,e,a)},d(t){t&&c(e)}}}function ft(t){let e,a;return e=new M({props:{$$slots:{default:[lt]},$$scope:{ctx:t}}}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p(t,a){const s={};1&a&&(s.$$scope={dirty:a,ctx:t}),e.$set(s)},i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}function $t(t){let e,a,s,l,$,d,m;return a=new U({props:{class:"error-color",bordered:!0,offsetX:10,offsetY:10,$$slots:{default:[nt],badge:[rt]},$$scope:{ctx:t}}}),l=new U({props:{class:"primary-color",dot:!0,bottom:!0,offsetX:10,offsetY:10,$$slots:{default:[it]},$$scope:{ctx:t}}}),d=new U({props:{class:"primary-color",bordered:!0,value:2,offsetX:16,offsetY:16,$$slots:{default:[ft]},$$scope:{ctx:t}}}),{c(){e=o("div"),N(a.$$.fragment),s=x(),N(l.$$.fragment),$=x(),N(d.$$.fragment),this.h()},l(t){e=r(t,"DIV",{class:!0});var o=n(e);O(a.$$.fragment,o),s=v(o),O(l.$$.fragment,o),$=v(o),O(d.$$.fragment,o),o.forEach(c),this.h()},h(){i(e,"class","d-flex pt-4 pb-4 justify-space-around")},m(t,o){f(t,e,o),C(a,e,null),E(e,s),C(l,e,null),E(e,$),C(d,e,null),m=!0},p(t,[e]){const s={};1&e&&(s.$$scope={dirty:e,ctx:t}),a.$set(s);const o={};1&e&&(o.$$scope={dirty:e,ctx:t}),l.$set(o);const r={};1&e&&(r.$$scope={dirty:e,ctx:t}),d.$set(r)},i(t){m||(u(a.$$.fragment,t),u(l.$$.fragment,t),u(d.$$.fragment,t),m=!0)},o(t){b(a.$$.fragment,t),b(l.$$.fragment,t),b(d.$$.fragment,t),m=!1},d(t){t&&c(e),T(a),T(l),T(d)}}}var dt=Object.freeze({__proto__:null,basic:class extends t{constructor(t){super(),e(this,t,null,W,a,{})}},notifications:class extends t{constructor(t){super(),e(this,t,st,at,a,{})}},offset:class extends t{constructor(t){super(),e(this,t,null,$t,a,{})}}});function mt(t){let e,a,s,l,$,d,m,p,h,g,x,v,y,w,j,B,P,Y,k,D,X,H,M,V,q,F,J,K,L,U,Q,R,W,Z,tt,et,at,st,ot,rt,nt,ct,it,lt,ft,$t,dt,mt,pt,ut,ht,gt,bt,xt,vt,Et,yt;return B=new z({props:{doc:_.Badge}}),Q=new G({props:{name:"basic"}}),ot=new G({props:{name:"notifications"}}),Et=new G({props:{name:"offset"}}),{c(){e=o("section"),a=o("h1"),s=o("a"),l=o("i"),$=I("Badges"),d=o("p"),m=I("The "),p=o("code"),h=I("Badge"),g=I(" component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons."),x=o("section"),v=o("h2"),y=o("a"),w=o("i"),j=I("API"),N(B.$$.fragment),P=o("section"),Y=o("h2"),k=o("a"),D=o("i"),X=I("Examples"),H=o("p"),M=I("Below is a collection of simple to complex examples."),V=o("section"),q=o("h3"),F=o("a"),J=o("i"),K=I("Basic"),L=o("p"),U=I("This is how to use basic badges."),N(Q.$$.fragment),R=o("section"),W=o("h3"),Z=o("a"),tt=o("i"),et=I("Dynamic Notifications"),at=o("p"),st=I("You can incorporate badges with dynamic content to make things such as a notification system."),N(ot.$$.fragment),rt=o("section"),nt=o("h3"),ct=o("a"),it=o("i"),lt=I("Offset"),ft=o("p"),$t=I("The "),dt=o("code"),mt=I("Badge"),pt=I(" component is flexible and can be used in a variety of use-cases over numerous elements. Options to tweak the location are also available through the "),ut=o("code"),ht=I("offsetX"),gt=I(" and "),bt=o("code"),xt=I("offsetY"),vt=I(" props."),N(Et.$$.fragment),this.h()},l(t){e=r(t,"SECTION",{});var o=n(e);a=r(o,"H1",{class:!0,id:!0});var i=n(a);s=r(i,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var f=n(s);l=r(f,"I",{class:!0}),n(l).forEach(c),f.forEach(c),$=A(i,"Badges"),i.forEach(c),d=r(o,"P",{});var u=n(d);m=A(u,"The "),p=r(u,"CODE",{});var b=n(p);h=A(b,"Badge"),b.forEach(c),g=A(u," component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons."),u.forEach(c),x=r(o,"SECTION",{});var E=n(x);v=r(E,"H2",{class:!0,id:!0});var I=n(v);y=r(I,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var N=n(y);w=r(N,"I",{class:!0}),n(w).forEach(c),N.forEach(c),j=A(I,"API"),I.forEach(c),O(B.$$.fragment,E),E.forEach(c),P=r(o,"SECTION",{});var C=n(P);Y=r(C,"H2",{class:!0,id:!0});var T=n(Y);k=r(T,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var S=n(k);D=r(S,"I",{class:!0}),n(D).forEach(c),S.forEach(c),X=A(T,"Examples"),T.forEach(c),H=r(C,"P",{});var _=n(H);M=A(_,"Below is a collection of simple to complex examples."),_.forEach(c),V=r(C,"SECTION",{});var G=n(V);q=r(G,"H3",{class:!0,id:!0});var z=n(q);F=r(z,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var yt=n(F);J=r(yt,"I",{class:!0}),n(J).forEach(c),yt.forEach(c),K=A(z,"Basic"),z.forEach(c),L=r(G,"P",{});var wt=n(L);U=A(wt,"This is how to use basic badges."),wt.forEach(c),O(Q.$$.fragment,G),G.forEach(c),R=r(C,"SECTION",{});var It=n(R);W=r(It,"H3",{class:!0,id:!0});var At=n(W);Z=r(At,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var jt=n(Z);tt=r(jt,"I",{class:!0}),n(tt).forEach(c),jt.forEach(c),et=A(At,"Dynamic Notifications"),At.forEach(c),at=r(It,"P",{});var Bt=n(at);st=A(Bt,"You can incorporate badges with dynamic content to make things such as a notification system."),Bt.forEach(c),O(ot.$$.fragment,It),It.forEach(c),rt=r(C,"SECTION",{});var Nt=n(rt);nt=r(Nt,"H3",{class:!0,id:!0});var Ot=n(nt);ct=r(Ot,"A",{href:!0,"aria-hidden":!0,tabindex:!0});var Ct=n(ct);it=r(Ct,"I",{class:!0}),n(it).forEach(c),Ct.forEach(c),lt=A(Ot,"Offset"),Ot.forEach(c),ft=r(Nt,"P",{});var Tt=n(ft);$t=A(Tt,"The "),dt=r(Tt,"CODE",{});var Pt=n(dt);mt=A(Pt,"Badge"),Pt.forEach(c),pt=A(Tt," component is flexible and can be used in a variety of use-cases over numerous elements. Options to tweak the location are also available through the "),ut=r(Tt,"CODE",{});var St=n(ut);ht=A(St,"offsetX"),St.forEach(c),gt=A(Tt," and "),bt=r(Tt,"CODE",{});var Yt=n(bt);xt=A(Yt,"offsetY"),Yt.forEach(c),vt=A(Tt," props."),Tt.forEach(c),O(Et.$$.fragment,Nt),Nt.forEach(c),C.forEach(c),o.forEach(c),this.h()},h(){i(l,"class","mdi mdi-pound"),i(s,"href","#badges"),i(s,"aria-hidden","true"),i(s,"tabindex","-1"),i(a,"class","heading text-h3 mb-4"),i(a,"id","badges"),i(w,"class","mdi mdi-pound"),i(y,"href","#api"),i(y,"aria-hidden","true"),i(y,"tabindex","-1"),i(v,"class","heading text-h4 mb-3"),i(v,"id","api"),i(D,"class","mdi mdi-pound"),i(k,"href","#examples"),i(k,"aria-hidden","true"),i(k,"tabindex","-1"),i(Y,"class","heading text-h4 mb-3"),i(Y,"id","examples"),i(J,"class","mdi mdi-pound"),i(F,"href","#basic"),i(F,"aria-hidden","true"),i(F,"tabindex","-1"),i(q,"class","heading text-h5 mb-2"),i(q,"id","basic"),i(tt,"class","mdi mdi-pound"),i(Z,"href","#dynamic-notifications"),i(Z,"aria-hidden","true"),i(Z,"tabindex","-1"),i(W,"class","heading text-h5 mb-2"),i(W,"id","dynamic-notifications"),i(it,"class","mdi mdi-pound"),i(ct,"href","#offset"),i(ct,"aria-hidden","true"),i(ct,"tabindex","-1"),i(nt,"class","heading text-h5 mb-2"),i(nt,"id","offset")},m(t,o){f(t,e,o),E(e,a),E(a,s),E(s,l),E(a,$),E(e,d),E(d,m),E(d,p),E(p,h),E(d,g),E(e,x),E(x,v),E(v,y),E(y,w),E(v,j),C(B,x,null),E(e,P),E(P,Y),E(Y,k),E(k,D),E(Y,X),E(P,H),E(H,M),E(P,V),E(V,q),E(q,F),E(F,J),E(q,K),E(V,L),E(L,U),C(Q,V,null),E(P,R),E(R,W),E(W,Z),E(Z,tt),E(W,et),E(R,at),E(at,st),C(ot,R,null),E(P,rt),E(rt,nt),E(nt,ct),E(ct,it),E(nt,lt),E(rt,ft),E(ft,$t),E(ft,dt),E(dt,mt),E(ft,pt),E(ft,ut),E(ut,ht),E(ft,gt),E(ft,bt),E(bt,xt),E(ft,vt),C(Et,rt,null),yt=!0},p:S,i(t){yt||(u(B.$$.fragment,t),u(Q.$$.fragment,t),u(ot.$$.fragment,t),u(Et.$$.fragment,t),yt=!0)},o(t){b(B.$$.fragment,t),b(Q.$$.fragment,t),b(ot.$$.fragment,t),b(Et.$$.fragment,t),yt=!1},d(t){t&&c(e),T(B),T(Q),T(ot),T(Et)}}}function pt(t){let e,a;const s=[ut];let o={$$slots:{default:[mt]},$$scope:{ctx:t}};for(let t=0;t<s.length;t+=1)o=k(o,s[t]);return e=new H({props:o}),{c(){N(e.$$.fragment)},l(t){O(e.$$.fragment,t)},m(t,s){C(e,t,s),a=!0},p(t,[a]){const o=0&a?D(s,[X(ut)]):{};2&a&&(o.$$scope={dirty:a,ctx:t}),e.$set(o)},i(t){a||(u(e.$$.fragment,t),a=!0)},o(t){b(e.$$.fragment,t),a=!1},d(t){T(e,t)}}}const ut={title:"Badges",related:[{Icons:"/components/icons/"},{Alerts:"/components/alerts/"}]};async function ht(){let t=await this.fetch("examples/components/badges.json");return t=await t.json(),{sources:t}}function gt(t,e,a){let{sources:s}=e;return V([s,dt]),t.$$set=t=>{"sources"in t&&a(0,s=t.sources)},[s]}export default class extends t{constructor(t){super(),e(this,t,gt,pt,a,{sources:0})}}export{ut as metadata,ht as preload};
  