https://vaktex.com/_app/immutable/nodes/27.DSYh_sHS.js

1(function(){try{var e=typeof window<`u`?window:typeof global<`u`?global:typeof globalThis<`u`?globalThis:typeof self<`u`?self:{};e.SENTRY_RELEASE={id:`d3d7f33885ffe420ffaed73d5934e4a2be1856ef`};var t=new e.Error().stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]=`8df2fc59-dce8-4ff5-8d39-17f980b918a5`,e._sentryDebugIdIdentifier=`sentry-dbid-8df2fc59-dce8-4ff5-8d39-17f980b918a5`)}catch{}})();import{$ as e,At as t,Dt as n,H as r,I as i,J as a,K as o,Ot as s,Q as c,St as l,T as u,Z as d,_t as f,a as p,dt as m,gt as h,it as g,jt as _,n as v,q as y,v as b,vt as x,wt as S,xt as C,yt as w,z as T}from"../chunks/F2x2LXrT.js";import{n as E}from"../chunks/BnYA8OHY.js";import"../chunks/D_t_OSPh.js";import{t as D}from"../chunks/IRIFVUDA.js";import{n as O,t as k}from"../chunks/DJ9U31yY.js";import{t as A}from"../chunks/CRvI4EzW.js";import{t as j}from"../chunks/DZjuLD9E.js";/* empty css                */import{t as M}from"../chunks/ByA-2wAe.js";import"../chunks/Dmugh0XH.js";var N=a(`<li><!><span class="bk-ic-sr"> </span></li>`),P=a(`<ul class="bk-ic-set" aria-label="Icons from our site"></ul>`),F=a(`<div class="bk-ic-wt"><!> <span> </span></div>`),I=a(`<div class="bk-ic-style"><figure><div class="bk-ic-pane bk-ic-weights"></div> <figcaption><b>One family</b> Heavier when small.</figcaption></figure> <figure><div class="bk-ic-pane bk-ic-chips"><span class="bk-ic-on-ink"><span class="bk-ic-c1"><!></span></span> <span class="bk-ic-on-card"><span class="bk-ic-c2"><!></span></span> <span class="bk-ic-on-media"><span class="bk-ic-c3"><!></span></span></div> <figcaption><b>Chips</b> Standalone icons sit in a round chip.</figcaption></figure> <figure><div class="bk-ic-pane bk-ic-inherit"><span class="bk-ic-k1"><!></span> <span class="bk-ic-k2"><!></span> <span class="bk-ic-k3"><!></span></div> <figcaption><b>Color from the chip</b> The glyph takes its container’s ink.</figcaption></figure></div>`),L=a(`<div class="bk-ic-donts"><figure><div class="bk-ic-pane bk-ic-mix"><span class="bk-ic-chip"><!></span> <span class="bk-ic-chip bk-ic-solid"><!></span></div> <figcaption><b>Don’t fill icons</b> Keep Lucide’s outlines.</figcaption></figure> <figure><div class="bk-ic-pane"><span class="bk-ic-chip bk-ic-tint-a"><!></span> <span class="bk-ic-chip bk-ic-tint-b"><!></span></div> <figcaption><b>Don’t color the glyph</b> It takes its chip’s ink.</figcaption></figure> <figure><div class="bk-ic-pane"><svg class="bk-ic-curve" viewBox="0 0 200 140" aria-hidden="true"><path class="bk-ic-grid" d="M20 120H180M20 20H180"></path><path class="bk-ic-line" d="M20 120L180 20"></path><g class="bk-ic-lx"><circle class="bk-ic-ly" cx="20" cy="120" r="7"></circle></g></svg></div> <figcaption><b>Don’t move on a linear ease</b> Taps and hovers spring, settle or glide.</figcaption></figure> <figure><div class="bk-ic-pane bk-ic-rmx"><span class="bk-ic-fake-sw" aria-hidden="true"><i></i>Reduce motion</span> <span class="bk-ic-chip bk-ic-bob"><!></span></div> <figcaption><b>Don’t animate without a reduced-motion path</b> Keep the color, drop the movement.</figcaption></figure></div>`);function R(e,a){s(a,!0);let c=[`search`,`lock`,`shield-half`,`cloud`,`bot`,`sparkles`,`globe`,`server`,`code-xml`,`terminal`,`workflow`,`layers`,`radar`,`compass`,`calendar-check`,`git-pull-request`],l=[{w:1.6,size:`l`,label:`1.6`},{w:2.4,size:`m`,label:`Default`},{w:3.4,size:`s`,label:`3.4`}],d=S(()=>O.current?k[O.current]:null);var p=y(),v=f(p),C=e=>{var t=P();i(t,20,()=>c,e=>e,(e,t)=>{var n=N(),i=h(n);A(i,{get name(){return t},"aria-hidden":`true`});var a=w(i),s=x(a,!0);_(n),m(()=>{b(n,`title`,t),r(s,t)}),o(e,n)}),_(t),o(e,t)},E=e=>{var n=I(),a=h(n),s=h(a);i(s,21,()=>l,({w:e,size:t,label:n})=>e,(e,t)=>{let n=()=>g(t).w,i=()=>g(t).size,a=()=>g(t).label;var s=F(),c=h(s);A(c,{name:`shield-half`,get weight(){return n()},"aria-hidden":`true`});var l=w(c,2),u=x(l,!0);_(s),m(()=>{b(s,`data-size`,i()),r(u,a())}),o(e,s)}),_(s),t(2),_(a);var c=w(a,2),f=h(c),p=h(f),v=h(p),y=h(v);A(y,{name:`chevron-right`,weight:2.5,"aria-hidden":`true`}),_(v),_(p);var S=w(p,2),C=h(S),T=h(C);A(T,{name:`arrow-up-right`,"aria-hidden":`true`}),_(C),_(S);var E=w(S,2),D=h(E),O=h(D);A(O,{name:`play`,weight:2.2,"aria-hidden":`true`}),_(D),_(E),_(f),t(2),_(c);var k=w(c,2),j=h(k),M=h(j),N=h(M);A(N,{name:`lock`,"aria-hidden":`true`}),_(M);var P=w(M,2),L=h(P);A(L,{name:`lock`,"aria-hidden":`true`}),_(P);var R=w(P,2);let z;var B=h(R);A(B,{name:`lock`,"aria-hidden":`true`}),_(R),_(j),t(2),_(k),_(n),m(()=>z=u(R,``,z,{"--fg":g(d)?.fg,"--bg":g(d)?.bg})),o(e,n)},D=e=>{var n=L(),r=h(n),i=h(r),a=h(i),s=h(a);A(s,{name:`house`,"aria-hidden":`true`}),_(a);var c=w(a,2),l=h(c);A(l,{name:`house`,"aria-hidden":`true`}),_(c),_(i),t(2),_(r);var u=w(r,2),d=h(u),f=h(d),p=h(f);A(p,{name:`lock`,"aria-hidden":`true`}),_(f);var m=w(f,2),g=h(m);A(g,{name:`search`,"aria-hidden":`true`}),_(m),_(d),t(2),_(u);var v=w(u,4),y=h(v),b=w(h(y),2),x=h(b);A(x,{name:`sparkles`,"aria-hidden":`true`}),_(b),_(y),t(2),_(v),_(n),o(e,n)};T(v,e=>{a.kind===`set`?e(C):a.kind===`style`?e(E,1):e(D,-1)}),o(e,p),n()}var z=a(`<figure class="bk-ic-cv"><svg viewBox="0 0 200 180" aria-hidden="true"><path class="bk-ic-gl" d="M20 30V165M60 30V165M100 30V165M140 30V165M180 30V165"></path><path class="bk-ic-gl bk-ic-gl-b" d="M20 150H180M20 60H180"></path><path class="bk-ic-cp"></path><path class="bk-ic-cu"></path>

1<g class="bk-ic-dx"><circle class="bk-ic-dy" cx="20" cy="150" r="6"></circle></g></svg> <figcaption><b> </b> <span> </span></figcaption></figure>`),B=a(`<div class="bk-ic-curves"></div>`),V=a(`<div class="bk-ic-demos"><figure><div class="bk-ic-stage"><!></div> <figcaption><b>Button</b> The chevron glides, the chip springs. <code>Glide + spring</code></figcaption></figure> <figure><div class="bk-ic-stage bk-ic-card"><!></div> <figcaption><b>Card</b> The arrow chip fills and settles. <code>Settle</code></figcaption></figure> <figure><div class="bk-ic-stage bk-ic-faq"><div class="fq"><div class="fq-l"><details><summary>Open me<!></summary> <p>It turns back as this closes.</p></details></div></div></div> <figcaption><b>Toggle</b> The chevron turns. <code>Glide</code></figcaption></figure> <figure><div class="bk-ic-stage bk-ic-media"><!></div> <figcaption><b>Glass</b> Pops on hover, sinks on press. <code>Spring</code></figcaption></figure></div>`),H=a(`<div class="bk-ic-rm"><button type="button" class="bk-ic-sw" role="switch"><span aria-hidden="true"></span>Reduce motion</button> <div class="bk-ic-rm-stage"><!> <div class="bk-ic-media"><!></div></div></div>`);function U(a,c){s(c,!0);let p=(e,t)=>`${20+e*160} ${150-t*90}`,v=[{id:`spring`,name:`Spring`,use:`Things that arrive or respond.`,bez:[.34,1.56,.64,1]},{id:`settle`,name:`Settle`,use:`Things that come to rest.`,bez:[.2,.8,.2,1]},{id:`glide`,name:`Glide`,use:`Slides and turns.`,bez:[.65,0,.35,1]},{id:`loop`,name:`Loop`,use:`Idle motion that repeats.`,bez:[.45,0,.55,1]}],D=S(()=>O.current?k[O.current].fg:`var(--color-ink)`),N=l(!1),P=new E(`(prefers-reduced-motion: reduce)`),F=S(()=>P.current);var I=y(),L=f(I),R=e=>{var n=B();let a;i(n,21,()=>v,e=>e.id,(e,n)=>{let i=S(()=>{let[e,t,r,i]=g(n).bez;return{x1:e,y1:t,x2:r,y2:i}});var a=z();let s;var c=h(a),l=w(h(c),2),d=w(l);t(),_(c);var f=w(c,2),v=h(f),y=x(v,!0),C=w(v,2),T=x(C,!0);_(f),_(a),m((e,t,i,o,c,f,p,m,h)=>{b(a,`data-kind`,g(n).id),s=u(a,``,s,{"--e":e}),b(l,`d`,`M${t??``}L${i??``}M${o??``}L${c??``}`),b(d,`d`,`M${f??``}C${p??``} ${m??``} ${h??``}`),r(y,g(n).name),r(T,g(n).use)},[()=>`cubic-bezier(${g(n).bez.join(`, `)??``})`,()=>p(0,0),()=>p(g(i).x1,g(i).y1),()=>p(1,1),()=>p(g(i).x2,g(i).y2),()=>p(0,0),()=>p(g(i).x1,g(i).y1),()=>p(g(i).x2,g(i).y2),()=>p(1,1)]),o(e,a)}),_(n),m(()=>a=u(n,``,a,{"--dot":g(D)})),o(e,n)},U=e=>{var n=V(),r=h(n),i=h(r),a=h(i);j(a,{children:(e,n)=>{t();var r=d(`Get started`);o(e,r)},$$slots:{default:!0}}),_(i),t(2),_(r);var s=w(r,2),c=h(s),l=h(c);M(l,{title:`Our colors`,index:0,bg:`var(--color-sand-200)`,href:`/brand/color`,linkLabel:`Our colors`}),_(c),t(2),_(s);var u=w(s,2),f=h(u),p=h(f),m=h(p),v=h(m),y=h(v),b=w(h(y));A(b,{name:`chevron-down`,weight:1.6,"aria-hidden":`true`}),_(y),t(2),_(v),_(m),_(p),_(f),t(2),_(u);var x=w(u,2),T=h(x),E=h(T);{let e=S(()=>g(N)?`pause`:`play`),t=S(()=>g(N)?`Pause`:`Play`);j(E,{style:`glass`,get variant(){return g(e)},get label(){return g(t)},onclick:()=>C(N,!g(N))})}_(T),t(2),_(x),_(n),o(e,n)},W=n=>{var r=H(),i=h(r),a=w(i,2),s=h(a);j(s,{children:(e,n)=>{t();var r=d(`Get started`);o(e,r)},$$slots:{default:!0}});var c=w(s,2),l=h(c);{let e=S(()=>g(N)?`pause`:`play`),t=S(()=>g(N)?`Pause`:`Play`);j(l,{style:`glass`,get variant(){return g(e)},get label(){return g(t)},onclick:()=>C(N,!g(N))})}_(c),_(a),_(r),m(()=>{b(r,`data-rm`,g(F)?`on`:`off`),b(i,`aria-checked`,g(F))}),e(`click`,i,()=>C(F,!g(F))),o(n,r)};T(L,e=>{c.kind===`curves`?e(R):c.kind===`demos`?e(U,1):e(W,-1)}),o(a,I),n()}c([`click`]);var W={category:`Brand guidelines`,title:`Iconography`,description:`Our icons and the way things move.`,order:5,headings:[{id:`icons`,text:`Icons`,depth:2},{id:`icon-style`,text:`Icon style`,depth:2},{id:`motion`,text:`Motion`,depth:2},{id:`microinteractions`,text:`Microinteractions`,depth:2},{id:`reduced-motion`,text:`Reduced motion`,depth:2},{id:`don-ts`,text:`Don’ts`,depth:2}]},{category:G,title:K,description:q,order:J,headings:Y}=W,X=a(`<h2 id="icons">Icons</h2> <p>Every icon is a Lucide outline. Standalone icons sit in a round chip. Hover one.</p> <!> <h2 id="icon-style">Icon style</h2> <p>Icons have no color of their own. The chip holds the color; the glyph follows it.</p> <!> <h2 id="motion">Motion</h2> <p>Things spring in, settle in, glide across and loop smoothly. Colors simply fade.</p> <!> <h2 id="microinteractions">Microinteractions</h2> <p>Each motion answers a touch. These are the real components, each on its real curve.</p> <!> <h2 id="reduced-motion">Reduced motion</h2> <p>When a visitor asks for less motion, movement stops and color stays.</p> <!> <h2 id="don-ts">Don’ts</h2> <!>`,1);function Z(e,t){let n=v(t,[`children`,`$$slots`,`$$events`,`$$legacy`]);D(e,p(()=>n,()=>W,{children:(e,t)=>{var n=X(),r=w(f(n),4);R(r,{kind:`set`});var i=w(r,6);R(i,{kind:`style`});var a=w(i,6);U(a,{kind:`curves`});var s=w(a,6);U(s,{kind:`demos`});var c=w(s,6);U(c,{kind:`reduced`}),R(w(c,4),{kind:`donts`}),o(e,n)},$$slots:{default:!0}}

1))}export{Z as component};