import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{R as r,V as i,a as ee,h as te,i as a,m as o,n as s,nt as c,o as ne,r as l,rt as u,t as d,u as re,w as f}from"./dist-DtfJeYQK.js";import{t as p}from"./jsx-runtime-C2wGStra.js";import{c as ie,h as ae,l as oe,m as se,o as ce}from"./iframe-D-oZzXNK.js";import{r as le}from"./react-B8jdHdWa.js";import{t as ue}from"./mdx-react-shim-8vvjMMnP.js";import{a as m,b as de,n as h,o as g,t as _}from"./dist-BUBfPDtK.js";import{r as v,t as y}from"./styled-components.browser.esm-DNcx_0lK.js";var fe,b,pe,me,he=t((()=>{f(),u(),fe=(e,t)=>({token:t,name:e,id:t[1],type:t[0],colorSchemeAware:!!t[2]}),b=(e,t)=>Object.entries(t).flatMap(([t,n])=>{let i=`${e}.${t}`;return r(n)?[fe(i,n)]:b(i,n)}),pe=e=>Object.entries(e).flatMap(([e,t])=>b(e,t)),me=pe(c)})),ge,_e=t((()=>{ge=(e,t,n)=>e.filter(e=>{if(t===`-`||t===`--`)return!0;if(t?.startsWith(`--`))return e.id.toLowerCase().startsWith(t.substring(2).toLowerCase());if(t){let r=e.name.toLowerCase().indexOf(t.toLowerCase())>-1,i=e.value.toLowerCase().indexOf(t.toLowerCase())>-1;return(r||i)&&(n?e.colorSchemeAware:!e.colorSchemeAware)}return n?e.colorSchemeAware:!e.colorSchemeAware})}));function ve(e,t){return me.map(n=>({...n,value:`${l(e,t,n.token)}`}))}var x,S,C,ye,be,xe=t((()=>{d(),a(),x=e(n()),he(),_e(),S=p(),C=(0,x.createContext)({terms:``,colorScheme:void 0,results:[],setColorScheme:()=>void 0,setSearchTerms:()=>void 0}),ye=window?.localStorage?.getItem(`storybook.ds-color-scheme`)||void 0,be=({children:e})=>{let{findColorScheme:t}=te(),{theme:n}=ee(),[r,i]=(0,x.useState)(ye),[a,s]=(0,x.useState)(``),[c,ne]=(0,x.useState)([]),l=(0,x.useCallback)(e=>i(e),[i]),u=(0,x.useCallback)(e=>s(e),[s]);if(!n)throw Error(`useToken() must be used within a ThemeProvider`);return(0,x.useEffect)(()=>{ne(ge(ve(n,t(r||`base`)),a,!!r))},[r,t,a,n]),(0,S.jsx)(C.Provider,{value:{terms:a,results:c,colorScheme:r,setSearchTerms:u,setColorScheme:l},children:(0,S.jsx)(o,{colorScheme:r||`base`,children:e})})}})),Se,w,T=t((()=>{Se=e(n()),xe(),w=()=>(0,Se.useContext)(C)})),Ce,E,D,we=t((()=>{e(n()),v(),Ce=p(),E=y.div`
    width: 64px;
    height: 64px;
    color: white;
    background-color: ${({value:e})=>e};
`,D=({value:e})=>(0,Ce.jsx)(E,{value:e})})),O,k,A,Te=t((()=>{e(n()),v(),O=p(),k=y.div`
    background: white;
    width: 48px;
    height: 48px
    padding: 8px 0 0 8px;
    background: ${({value:e})=>e===`white`?`black`:`white`};


    span {
        display: block;
        width: 40px;
        height: 40px;
        border-width: 2px;
        border-style: solid;
        border-top-left-radius: 16px;
        border-color: ${({value:e})=>e};
        border-right: none;
        border-bottom: none;
    }
`,A=({value:e})=>(0,O.jsx)(k,{value:e,children:(0,O.jsx)(`span`,{})})})),j,Ee,De,Oe=t((()=>{e(n()),v(),j=p(),Ee=y.div`
    minwidth: 48px;
    minheight: 48px;
    padding: 8px 0 0 8px;
    border-image: ${({value:e})=>e};
`,De=({value:e})=>(0,j.jsx)(Ee,{value:e,children:(0,j.jsx)(`span`,{})})})),ke,Ae,je,Me=t((()=>{e(n()),v(),ke=p(),Ae=y.div`
    width: 32px;
    height: 32px;
    border-style: solid;
    border-color: #999;
    border-width: 12px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: ${({value:e})=>e};
`,je=({value:e})=>(0,ke.jsx)(Ae,{value:e})})),M,Ne,Pe,Fe=t((()=>{e(n()),v(),M=p(),Ne=y.div`
    width: 64px;
    padding-top: ${({value:e})=>e};
    background: #666;

    span {
        display: block;
        width: 100%;
        border-top-style: solid;
        border-color: white;
        border-width: 2px;
        height: 28px;
        background: #999;
    }
`,Pe=({value:e})=>(0,M.jsx)(Ne,{value:e,children:(0,M.jsx)(`span`,{})})})),Ie,Le,Re,ze=t((()=>{e(n()),v(),Ie=p(),Le=y.div`
    width: 64px;
    height: 64px;
    box-shadow: ${({value:e})=>e};
`,Re=({value:e})=>(0,Ie.jsx)(Le,{value:e})})),Be,Ve,He,Ue=t((()=>{d(),e(n()),v(),Be=p(),Ve=y.div`
    background: #999;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    width: 200px;
    color: white;

    ${re(`
        filter: brightness(${({value:e})=>e});
    `)}
`,He=({value:e})=>(0,Be.jsx)(Ve,{value:e,children:`hover me`})})),We,Ge,Ke,qe=t((()=>{e(n()),v(),We=p(),Ge=y.div`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 20px;
    font-weight: 700;
    color: ${({value:e})=>e};
    background: ${({value:e})=>e===`white`?`black`:`white`};
`,Ke=({value:e})=>(0,We.jsx)(Ge,{value:e,children:`A`})})),N,Je,P,Ye=t((()=>{e(n()),v(),N=p(),Je=y.div`
    font-family: ${({value:e})=>e};
    font-size: 20px;
    font-weight: 600;

    p:first-child {
        font-weight: 700;
    }

    p:last-child {
        font-weight: 400;
    }
`,P=({value:e})=>(0,N.jsxs)(Je,{value:e,children:[(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (700)`}),(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (500)`}),(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (400)`})]})})),Xe,Ze,Qe,$e=t((()=>{e(n()),v(),Xe=p(),Ze=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    font-size: ${({value:e})=>e};
`,Qe=({value:e})=>(0,Xe.jsx)(Ze,{value:e,children:`Lorem ipsum dolor sit amet`})})),et,tt,nt,rt=t((()=>{e(n()),v(),et=p(),tt=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    font-style: ${({value:e})=>e};
    font-size: 14px;
`,nt=({value:e})=>(0,et.jsx)(tt,{value:e,children:`Lorem ipsum dolor sit amet.`})})),it,at,ot,st=t((()=>{e(n()),v(),it=p(),at=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    font-size: 20px;
    font-weight: ${({value:e})=>e};
`,ot=({value:e})=>(0,it.jsx)(at,{value:e,children:`Lorem ipsum dolor sit amet`})})),ct,lt,ut,dt=t((()=>{e(n()),v(),ct=p(),lt=y.div`
    height: ${({value:e})=>e};
    width: 40px;
    background-color: black;
`,ut=({value:e})=>(0,ct.jsx)(lt,{value:e})})),ft,pt,mt,ht=t((()=>{e(n()),v(),ft=p(),pt=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    letter-spacing: ${({value:e})=>e};
    font-size: 14px;
`,mt=({value:e})=>(0,ft.jsx)(pt,{value:e,children:`Lorem ipsum dolor sit amet.`})})),gt,_t,vt,yt=t((()=>{e(n()),v(),gt=p(),_t=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    line-height: ${({value:e})=>e};
    font-size: 14px;
`,vt=({value:e})=>(0,gt.jsx)(_t,{value:e,children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut, bibendum condimentum nunc.`})})),bt,xt,St,Ct=t((()=>{e(n()),v(),bt=p(),xt=y.div`
    font-family: PreplyInter;
    @supports (font-variation-settings: normal) {
        font-family: PreplyInterV;
    }
    line-height: ${({value:e})=>e};
    font-size: 14px;
`,St=({value:e})=>(0,bt.jsx)(xt,{value:e,children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut, bibendum condimentum nunc.`})})),F,wt,Tt,Et=t((()=>{e(n()),v(),F=p(),wt=y.div`
    background: white;
    width: 48px;
    height: 48px
    padding: 8px 0 0 8px;
    background: ${({value:e})=>e===`white`?`black`:`white`};


    span {
        display: block;
        width: 40px;
        height: 40px;
        border-width: 2px;
        border-style: solid;
        border-top-left-radius: 16px;
        border-color: ${({value:e})=>e};
        border-right: none;
        border-bottom: none;
    }
`,Tt=({value:e})=>(0,F.jsx)(wt,{value:e,children:(0,F.jsx)(`span`,{})})})),I,Dt,Ot,kt=t((()=>{e(n()),v(),I=p(),Dt=y.div`
    width: 64px;
    padding-top: 2px;
    background: #666;

    span {
        height: 2px;
        display: block;
        width: 100%;
        border-top-style: solid;
        border-color: white;
        border-width: ${({value:e})=>e};
        height: 28px;
        background: #999;
    }
`,Ot=({value:e})=>(0,I.jsx)(Dt,{value:e,children:(0,I.jsx)(`span`,{})})})),L,At,jt,Mt=t((()=>{e(n()),v(),L=p(),At=y.div`
    width: 64px;
    padding-top: ${({value:e})=>e};
    background: #666;

    span {
        display: block;
        width: 100%;
        border-top-style: solid;
        border-color: white;
        border-width: 2px;
        height: 28px;
        background: #999;
    }
`,jt=({value:e})=>(0,L.jsx)(At,{value:e,children:(0,L.jsx)(`span`,{})})})),Nt,Pt,Ft,It=t((()=>{e(n()),v(),Nt=p(),Pt=y.div`
    width: 64px;
    height: 64px;
    background-color: ${({value:e})=>e};
`,Ft=({value:e})=>(0,Nt.jsx)(Pt,{value:e})})),Lt,Rt,R,zt=t((()=>{e(n()),v(),Lt=p(),Rt=y.div`
    width: ${({value:e})=>e};
    height: ${({value:e})=>e};
    background-color: black;
`,R=({value:e})=>(0,Lt.jsx)(Rt,{value:e})})),Bt,Vt,z,Ht=t((()=>{e(n()),v(),Bt=p(),Vt=y.div`
    width: ${({value:e})=>e};
    height: 40px;
    background-color: black;
`,z=({value:e})=>(0,Bt.jsx)(Vt,{value:e})})),B,Ut,Wt,Gt=t((()=>{e(n()),v(),B=p(),Ut=y.div`
    text-decoration: ${({value:e})=>e};
    font-size: 20px;
    font-weight: 600;

    p:first-child {
        font-weight: 700;
    }

    p:last-child {
        font-weight: 400;
    }
`,Wt=({value:e})=>(0,B.jsx)(Ut,{value:e,children:(0,B.jsx)(`p`,{children:`Lorem ipsum dolor sit amet`})})})),V,Kt,qt,Jt=t((()=>{e(n()),v(),V=p(),Kt=y.div`
    animation: moveBackAndForth ${({value:e})=>e}ms infinite alternate;

    @keyframes moveBackAndForth {
        from {
            padding-left: 0px;
        }
        to {
            padding-left: 100px;
        }
    }
`,qt=({value:e})=>(0,V.jsx)(Kt,{value:e,children:(0,V.jsx)(`p`,{children:`Lorem ipsum`})})})),Yt,Xt=t((()=>{Yt=()=>null})),H,Zt,Qt,$t=t((()=>{e(n()),v(),H=p(),Zt=y.div`
    transition: all ${({value:e})=>e};

    padding-left: 0px;
    &:hover {
        padding-left: 100px;
    }
`,Qt=({value:e})=>(0,H.jsx)(Zt,{value:e,children:(0,H.jsx)(`p`,{children:`Hover me, please 🙏`})})})),en,tn=t((()=>{en=({value:e})=>null})),nn,rn,an,on=t((()=>{e(n()),v(),nn=p(),rn=y.div`
    width: 64px;
    height: 64px;
    color: white;
    background: ${({value:e})=>e};
`,an=({value:e})=>(0,nn.jsx)(rn,{value:e})}));function sn(e){let t=Object.entries(un).find(([t])=>e.startsWith(t));return t&&t[1]}function cn(e){let t=e.split(`.`).pop()||``;return t in U?U[t]:t}function ln(e){return dn[sn(e.name)||cn(e.name)||``]}var un,U,dn,fn,pn=t((()=>{we(),Te(),Oe(),Me(),Fe(),ze(),Ue(),qe(),Ye(),$e(),rt(),st(),dt(),ht(),yt(),Ct(),Et(),kt(),Mt(),It(),zt(),Ht(),Gt(),Jt(),Xt(),$t(),tn(),on(),un={"icon.size":`size`,spacing:`space`,sizing:`space`,radius:`borderRadius`,"dsInternalPrimitive.button.borderWeight":`borderWidth`,"icon.fieldLayout.width":`horizontalPadding`,"icon.fieldLayout.height":`horizontalPadding`,background:`color`,"color.border.ai.button.borderImage":`borderImage`,"color.border.ai.surface.borderImage":`borderImage`,"color.background.ai.surface.linearGradient":`background`,color:`color`,"spinner.icon.color":`color`,"dsInternalPrimitive.color":`color`,"exp.color":`color`,"badge.base.color":`color`,"badge.accent":`color`,content:`color`,elevation:`boxShadow`,dropShadow:`boxShadow`,"motion.components.interaction":`transition`,"calloutBanner.background":`background`,"alertBanner.background":`background`},U={color:`fgColor`,lineHeight:`lineHeightPixels`,shadow:`boxShadow`,borderImage:`borderImage`,offset:`size`,x1:`easingCoordinate`,y1:`easingCoordinate`,x2:`easingCoordinate`,y2:`easingCoordinate`,short:`duration`,function:`easing`,functionName:`easing`},dn={background:{renderer:an},bgColor:{renderer:D},borderColor:{renderer:A},borderImage:{renderer:De},borderRadius:{renderer:je},brightness:{renderer:He},color:{renderer:Ft},fgColor:{renderer:Ke},fontFamily:{renderer:P},fontSize:{renderer:Qe},fontWeight:{renderer:ot},fontStyle:{renderer:nt},letterSpacing:{renderer:mt},gap:{renderer:z},height:{renderer:ut},horizontalPadding:{renderer:R},lineHeightRatio:{renderer:St},lineHeightPixels:{renderer:vt},outlineColor:{renderer:Tt},outlineOffset:{renderer:Ot},outlineWidth:{renderer:jt},borderWidth:{renderer:Pe},padding:{renderer:R},size:{renderer:R},space:{renderer:z},boxShadow:{renderer:Re},typeface:{renderer:P},verticalPadding:{renderer:R},textDecoration:{renderer:Wt},duration:{renderer:qt},easing:{renderer:Yt},transition:{renderer:Qt},easingCoordinate:{renderer:en}},fn=e=>{let t=ln(e);if(!t)throw Error(`No renderer for token "${e.name}".`);return t}})),mn,hn,gn,_n,vn=t((()=>{v(),mn=y.li`
    list-style: none;
    margin-bottom: 32px;

    span[title] {
        text-align: center;
        display: block;
    }
`,hn=y.p`
    margin: 0;
    margin-top: 9px;
    font-size: 14px;
`,gn=y.div`
    padding-top: 6px;
`,_n=y.p`
    margin: 0;
    width: 160px;
    text-align: right;
    font-size: 16px;
    line-height: 32px;
`,y.div`
    padding-top: 2px;
`})),W,yn,bn=t((()=>{d(),_(),e(n()),pn(),vn(),W=p(),yn=({token:e})=>{let t=s(e.token),n=fn(e).renderer;return(0,W.jsx)(mn,{children:(0,W.jsxs)(g,{gap:`16`,direction:`column`,children:[(0,W.jsxs)(m,{gap:`16`,columns:[`90px`,`1fr`,`2fr`],children:[(0,W.jsx)(hn,{children:(0,W.jsxs)(h,{highlight:`blue`,children:[`(--`,e.id,`)`]})}),(0,W.jsxs)(g,{direction:`column`,gap:`4`,children:[(0,W.jsx)(de,{variant:`default-semibold`,children:e.name}),(0,W.jsxs)(de,{variant:`default-regular`,children:[`@`,e.name.replace(/\./g,`-`)]})]}),(0,W.jsx)(gn,{children:(0,W.jsx)(g,{direction:`column`,gap:`8`,justifyContent:`start`,children:e.colorSchemeAware&&(0,W.jsx)(`div`,{children:(0,W.jsx)(h,{children:(0,W.jsx)(`span`,{title:`this token may have different values, depending on color scheme`,children:`color scheme aware`})})})})})]}),(0,W.jsxs)(m,{gap:`64`,columns:[`auto`,`1fr`],alignItems:`center`,children:[(0,W.jsx)(_n,{children:(0,W.jsx)(`span`,{children:t})}),(0,W.jsx)(`div`,{children:(0,W.jsx)(n,{name:e.name,value:t})})]})]})})}})),xn,Sn,Cn=t((()=>{v(),xn=y.ul`
    margin: 0;
    padding: 0;
`,Sn=y.div`
    font-size: 24px;

    h3 {
        margin: 0;
    }
`})),wn,Tn=t((()=>{wn={but:{name:`button`,alternatives:[`action`],note:`See also: props of <Button> component`},layo:{name:`layout`,alternatives:[`gap`,`padding`,`space`],note:`See also: props of <Layout> components`},align:{name:`align`,alternatives:[],note:`You probably want to look at the <Layout> components`},just:{name:`justify`,alternatives:[],note:`You probably want to look at the <Layout> components`},bol:{name:`bold`,alternatives:[`weight`],note:`See also <Text strong> component.`},help:{name:`help? :-D`,alternatives:[],note:`To be continued...`}}})),En,Dn,On,kn=t((()=>{v(),En=y.h3`
    margin: 0;
    font-size: 24px;
    font-weight: 400;
`,Dn=y.h3`
    font-size: 16px;
    font-weight: 400;
`,On=y.h3`
    font-size: 16px;
    font-weight: 400;
`})),G,An,jn=t((()=>{_(),e(n()),kn(),G=p(),An=({hint:e})=>{let t=e.alternatives||[];return(0,G.jsxs)(g,{gap:`24`,column:!0,children:[(0,G.jsxs)(En,{children:[`Searching for `,(0,G.jsx)(h,{children:e.name}),`?`,` `]}),(0,G.jsxs)(g,{gap:`8`,column:!0,children:[t.length&&(0,G.jsxs)(Dn,{children:[`Try searchinng for`,` `,t.map((e,n)=>(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(h,{children:e},e),n+2<t.length?`, `:``,n+2===t.length?` or `:``,n===t.length-1?` `:``]})),`instead.`]}),e.note&&(0,G.jsxs)(On,{children:[(0,G.jsx)(`strong`,{children:`Note:`}),` `,e.note]})]})]})}})),K,Mn,Nn=t((()=>{e(n()),Tn(),jn(),K=p(),Mn=({terms:e})=>e?(0,K.jsx)(K.Fragment,{children:Object.entries(wn).map(([t,n])=>e.toLowerCase().indexOf(t)>-1&&(0,K.jsx)(An,{hint:n},t))}):null})),q,J,Pn=t((()=>{_(),e(n()),T(),bn(),Cn(),Nn(),q=p(),J=()=>{let{results:e,terms:t}=w();return e.length?(0,q.jsx)(xn,{children:e.map(e=>(0,q.jsx)(yn,{token:e},e.id))}):(0,q.jsx)(Sn,{children:(0,q.jsxs)(g,{gap:`24`,column:!0,children:[(0,q.jsx)(`h3`,{children:`No tokens found`}),(0,q.jsx)(Mn,{terms:t})]})})}})),Fn,In,Ln=t((()=>{v(),Fn=y.div`
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;

    label {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    p {
        margin: 0;
    }

    select {
        height: 32px;
        padding: 2.5px 5px;
        border-width: 1px;
        border-color: ${({isNotDefault:e})=>e?`orange;`:`#ccc`};
    }
`,In=y.select`
    padding: 5px 10px;
`})),Rn,Y,zn,Bn=t((()=>{f(),Rn=e(n()),T(),Ln(),Y=p(),zn=({onChange:e})=>{let{colorScheme:t,setColorScheme:n}=w(),r=(0,Rn.useCallback)(t=>{let r=t.target.value;window?.localStorage?.setItem(`storybook.ds-color-scheme`,r),n(r??void 0),e?.(r)},[e,n]);return(0,Y.jsxs)(Fn,{isNotDefault:!!t,children:[(0,Y.jsx)(`label`,{children:`Color Scheme`}),(0,Y.jsxs)(In,{value:t,onChange:r,children:[(0,Y.jsx)(`option`,{value:``,children:`-- no color scheme --`},`none`),Object.keys(i).map(e=>(0,Y.jsx)(`option`,{value:e,children:e},e))]})]})}})),Vn,Hn=t((()=>{v(),Vn=y.div`
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 48px;
    min-height: 24px;
    font-size: 16px;

    p {
        margin: 0;
    }

    a {
        color: #0077b3;
    }
`})),X,Un,Wn,Gn,Kn,qn=t((()=>{_(),e(n()),T(),Hn(),X=p(),Un=({id:e})=>(0,X.jsxs)(X.Fragment,{children:[`Searching for token ID `,(0,X.jsx)(h,{highlight:`blue`,children:e}),`.`]}),Wn=({terms:e,colorScheme:t,results:n})=>(0,X.jsxs)(X.Fragment,{children:[`Found `,n.length,` results matching`,` `,(0,X.jsx)(h,{highlight:`green`,children:e}),` `,t?(0,X.jsxs)(X.Fragment,{children:[`within `,(0,X.jsx)(h,{highlight:`green`,children:`color scheme aware`}),` `,`tokens.`]}):(0,X.jsx)(X.Fragment,{children:`within tokens without color scheme.`})]}),Gn=({colorScheme:e,results:t})=>(0,X.jsx)(X.Fragment,{children:e?(0,X.jsxs)(X.Fragment,{children:[`Showing all `,(0,X.jsx)(h,{highlight:`blue`,children:t.length}),` `,`tokens that are`,` `,(0,X.jsx)(h,{highlight:`green`,children:`color scheme aware`}),`.`]}):(0,X.jsxs)(X.Fragment,{children:[`Showing all `,(0,X.jsx)(h,{highlight:`blue`,children:t.length}),` `,`color scheme anostic tokens.`]})}),Kn=()=>{let{terms:e,colorScheme:t,results:n}=w(),r=e?.startsWith(`--`)&&e?.substring(2);return(0,X.jsx)(Vn,{children:(0,X.jsxs)(`p`,{children:[r&&(0,X.jsx)(Un,{id:r}),e&&!r&&(0,X.jsx)(Wn,{terms:e,colorScheme:t,results:n}),!e&&!r&&(0,X.jsx)(Gn,{colorScheme:t,results:n}),` `,t&&(0,X.jsx)(`a`,{href:`./?path=/story/guides-color-schemes-intro--page`,children:`Learn more`})]})})}})),Jn,Yn,Xn,Zn,Qn=t((()=>{v(),Jn=y.div`
    position: relative;
    margin-top: -20px;
    padding-bottom: 200px;
    h1 {
        margin: 0;
    }
`,Yn=y.div`
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 20px 20px 24px;
    gap: 16px;
    background: white;
`,Xn=y.div`
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
`,Zn=y.input`
    flex: 1;
    padding: 8px;
    font-size: 16px;
    height: 32px;
    border-style: solid;
    border-width: 1px;
    border-color: ${({terms:e})=>e?`orange;`:`#ccc`};
`})),Z,Q,$n,er=t((()=>{d(),_(),Z=e(n()),T(),Bn(),qn(),Qn(),Q=p(),$n=()=>{let{theme:e}=ee(),{themes:t}=te(),{setTheme:n}=ne(),{colorScheme:r,terms:i,setColorScheme:a,setSearchTerms:o}=w(),s=(0,Z.useMemo)(()=>new URL(window.top?.location.href||``),[]),c=s.searchParams,l=c.get(`theme`),u=l&&t?.find(e=>e.name===l),d=c.get(`colorScheme`),re=c.get(`terms`);(0,Z.useEffect)(()=>{l&&(l!==e.name&&n&&u&&n(u),l&&d!==r&&a(d),o(re||``)),c.delete(`theme`),c.delete(`colorScheme`),c.delete(`terms`),window.top?.history.replaceState({},``,s)},[]);let f=(0,Z.useCallback)(e=>o(e),[o]);return(0,Q.jsx)(Jn,{children:(0,Q.jsx)(Yn,{children:(0,Q.jsx)(Xn,{children:(0,Q.jsxs)(g,{gap:`16`,direction:`column`,children:[(0,Q.jsx)(g,{justifyContent:`space-between`,alignItems:`start`,children:(0,Q.jsx)(`h1`,{id:`tokens`,className:`sbdocs sbdocs-h1 css-1j28tt`,children:`Token Explorer`})}),(0,Q.jsxs)(g,{gap:`8`,nowrap:!0,children:[(0,Q.jsx)(Zn,{terms:i,type:`text`,placeholder:`examples: teal, 300, action, primary, xs, --4adef, #00, 12px`,onChange:e=>f(e.target.value),value:i}),(0,Q.jsx)(zn,{})]}),(0,Q.jsx)(Kn,{})]})})})})}}));function tr(e){return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(ce,{title:`Guides/Token Explorer`}),`
`,(0,$.jsx)(ae,{theme:`tokyo-ui`,children:(0,$.jsxs)(be,{children:[(0,$.jsx)($n,{}),(0,$.jsx)(ie,{children:(0,$.jsx)(J,{})})]})})]})}function nr(e={}){let{wrapper:t}={...le(),...e.components};return t?(0,$.jsx)(t,{...e,children:(0,$.jsx)(tr,{...e})}):tr(e)}var $;t((()=>{$=p(),ue(),oe(),se(),Pn(),er(),xe()}))();export{nr as default};