@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/00.token-explorer-DCBSOdHJ.js

@@ -1,340 +0,0 @@
-import{aK as F,aL as L,r as a,aM as z,u as E,v as N,as as O,g as A,j as t,ar as B,aN as M,T as W,aO as R,V as H,aP as V,aQ as q,M as K,aR as G,aD as Y}from"./iframe-B_74HtSc.js";import{useMDXComponents as U}from"./index-DWFFXgf1.js";import{L as p}from"./LayoutFlex-CTH6ELdm.js";import{g as X,u as Q}from"./useToken-OSVftwxQ.js";import{b as J}from"./tokens-im-qJUCZ.js";import{L as w}from"./LayoutGrid-CUGRXgEO.js";import{T as y}from"./Text-DJTKRzSb.js";import{f as Z}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{w as T}from"./componentNames-hc9KR2nX.js";import{d as n}from"./styled-components.browser.esm-rrOBirU4.js";import{o as ee}from"./mixins-DZk1Zeoo.js";import"./preload-helper-Dp1pzeXC.js";import"./layout-relative.module-1z75aSwo-Dcy7i8oK.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";import"./text-centered-CYnBFi3a.js";import"./emotion-unitless.esm-BZwEwAnk.js";const te=e=>Array.isArray(e)&&e.length===3&&F.includes(e[L]),re=()=>{const{setTheme:e}=a.useContext(z);return{setTheme:e}},ne="TextHighlighted__ehLpO",oe={TextHighlighted:ne,"TextHighlighted--highlight-blue":"TextHighlighted--highlight-blue__a1Ymf","TextHighlighted--highlight-green":"TextHighlighted--highlight-green__QQm6L","TextHighlighted--highlight-primary":"TextHighlighted--highlight-primary__n35-d","TextHighlighted--highlight-secondary":"TextHighlighted--highlight-secondary__YEj6c","TextHighlighted--highlight-tertiary":"TextHighlighted--highlight-tertiary__uDEFk","TextHighlighted--highlight-accent":"TextHighlighted--highlight-accent__JrA2s","TextHighlighted--highlight-positive":"TextHighlighted--highlight-positive__tfVNZ","TextHighlighted--highlight-info":"TextHighlighted--highlight-info__W1sMI","TextHighlighted--highlight-warning":"TextHighlighted--highlight-warning__dzj54","TextHighlighted--highlight-critical":"TextHighlighted--highlight-critical__V3-1S"},h=a.forwardRef(function({children:r,highlight:i=O,tag:o=B,dataset:s,...d},l){const m=E(oe,T.TextHighlighted,[N("highlight",i)]),g={...Z(d),ref:l,className:m.join(" "),...A(s,{preplyDsComponent:T.TextHighlighted})};return t.jsx(o,{...g,children:r})});h.__docgenInfo={description:"",methods:[],displayName:"TextHighlighted",props:{highlight:{defaultValue:{value:"'green'",computed:!1},required:!1},tag:{defaultValue:{value:"'span'",computed:!1},required:!1}}};const ie=(e,r)=>({token:r,name:e,id:r[W],type:r[L],colorSchemeAware:!!r[M]}),I=(e,r)=>Object.entries(r).flatMap(([i,o])=>{const s=`${e}.${i}`;return te(o)?[ie(s,o)]:I(s,o)}),se=e=>Object.entries(e).flatMap(([r,i])=>I(r,i)),ae=se(J),de=(e,r,i)=>e.filter(o=>{if(r==="-"||r==="--")return!0;if(r!=null&&r.startsWith("--"))return o.id.toLowerCase().startsWith(r.substring(2).toLowerCase());if(r){const s=o.name.toLowerCase().indexOf(r.toLowerCase())>-1,d=o.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||d)&&(i?o.colorSchemeAware:!o.colorSchemeAware)}return i?o.colorSchemeAware:!o.colorSchemeAware}),_=a.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var D;const le=((D=window==null?void 0:window.localStorage)==null?void 0:D.getItem("storybook.ds-color-scheme"))||void 0;function ce(e,r){return ae.map(o=>({...o,value:`${X(e,r,o.token)}`}))}const he=({children:e})=>{const{findColorScheme:r}=R(),{theme:i}=H(),[o,s]=a.useState(le),[d,l]=a.useState(""),[m,g]=a.useState([]),u=a.useCallback(x=>s(x),[s]),f=a.useCallback(x=>l(x),[l]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return a.useEffect(()=>{const x=r(o||"base"),v=ce(i,x);g(de(v,d,!!o))},[o,r,d,i]),t.jsx(_.Provider,{value:{terms:d,results:m,colorScheme:o,setSearchTerms:f,setColorScheme:u},children:t.jsx(V,{colorScheme:o||"base",children:e})})},j=()=>a.useContext(_),ge=n.div`
-    width: 64px;
-    height: 64px;
-    color: white;
-    background-color: ${({value:e})=>e};
-`,pe=({value:e})=>t.jsx(ge,{value:e}),xe=n.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;
-    }
-`,ue=({value:e})=>t.jsx(xe,{value:e,children:t.jsx("span",{})}),me=n.div`
-    minwidth: 48px;
-    minheight: 48px;
-    padding: 8px 0 0 8px;
-    border-image: ${({value:e})=>e};
-`,fe=({value:e})=>t.jsx(me,{value:e,children:t.jsx("span",{})}),be=n.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})=>t.jsx(be,{value:e}),ve=n.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;
-    }
-`,we=({value:e})=>t.jsx(ve,{value:e,children:t.jsx("span",{})}),ye=n.div`
-    width: 64px;
-    height: 64px;
-    box-shadow: ${({value:e})=>e};
-`,Te=({value:e})=>t.jsx(ye,{value:e}),Se=n.div`
-    background: #999;
-    font-size: 16px;
-    line-height: 32px;
-    text-align: center;
-    width: 200px;
-    color: white;
-
-    ${ee(`
-        filter: brightness(${({value:e})=>e});
-    `)}
-`,ke=({value:e})=>t.jsx(Se,{value:e,children:"hover me"}),$e=n.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"};
-`,Ce=({value:e})=>t.jsx($e,{value:e,children:"A"}),De=n.div`
-    font-family: ${({value:e})=>e};
-    font-size: 20px;
-    font-weight: 600;
-
-    p:first-child {
-        font-weight: 700;
-    }
-
-    p:last-child {
-        font-weight: 400;
-    }
-`,S=({value:e})=>t.jsxs(De,{value:e,children:[t.jsx("p",{children:"Lorem ipsum dolor sit amet (700)"}),t.jsx("p",{children:"Lorem ipsum dolor sit amet (500)"}),t.jsx("p",{children:"Lorem ipsum dolor sit amet (400)"})]}),Le=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-size: ${({value:e})=>e};
-`,Re=({value:e})=>t.jsx(Le,{value:e,children:"Lorem ipsum dolor sit amet"}),He=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-style: ${({value:e})=>e};
-    font-size: 14px;
-`,Ie=({value:e})=>t.jsx(He,{value:e,children:"Lorem ipsum dolor sit amet."}),_e=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-size: 20px;
-    font-weight: ${({value:e})=>e};
-`,Pe=({value:e})=>t.jsx(_e,{value:e,children:"Lorem ipsum dolor sit amet"}),Fe=n.div`
-    height: ${({value:e})=>e};
-    width: 40px;
-    background-color: black;
-`,ze=({value:e})=>t.jsx(Fe,{value:e}),Ee=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    letter-spacing: ${({value:e})=>e};
-    font-size: 14px;
-`,Ne=({value:e})=>t.jsx(Ee,{value:e,children:"Lorem ipsum dolor sit amet."}),Oe=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    line-height: ${({value:e})=>e};
-    font-size: 14px;
-`,Ae=({value:e})=>t.jsx(Oe,{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."}),Be=n.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    line-height: ${({value:e})=>e};
-    font-size: 14px;
-`,Me=({value:e})=>t.jsx(Be,{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."}),We=n.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;
-    }
-`,Ve=({value:e})=>t.jsx(We,{value:e,children:t.jsx("span",{})}),qe=n.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;
-    }
-`,Ke=({value:e})=>t.jsx(qe,{value:e,children:t.jsx("span",{})}),Ge=n.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;
-    }
-`,Ye=({value:e})=>t.jsx(Ge,{value:e,children:t.jsx("span",{})}),Ue=n.div`
-    width: 64px;
-    height: 64px;
-    background-color: ${({value:e})=>e};
-`,Xe=({value:e})=>t.jsx(Ue,{value:e}),Qe=n.div`
-    width: ${({value:e})=>e};
-    height: ${({value:e})=>e};
-    background-color: black;
-`,b=({value:e})=>t.jsx(Qe,{value:e}),Je=n.div`
-    width: ${({value:e})=>e};
-    height: 40px;
-    background-color: black;
-`,k=({value:e})=>t.jsx(Je,{value:e}),Ze=n.div`
-    text-decoration: ${({value:e})=>e};
-    font-size: 20px;
-    font-weight: 600;
-
-    p:first-child {
-        font-weight: 700;
-    }
-
-    p:last-child {
-        font-weight: 400;
-    }
-`,et=({value:e})=>t.jsx(Ze,{value:e,children:t.jsx("p",{children:"Lorem ipsum dolor sit amet"})}),tt=n.div`
-    animation: moveBackAndForth ${({value:e})=>e}ms infinite alternate;
-
-    @keyframes moveBackAndForth {
-        from {
-            padding-left: 0px;
-        }
-        to {
-            padding-left: 100px;
-        }
-    }
-`,rt=({value:e})=>t.jsx(tt,{value:e,children:t.jsx("p",{children:"Lorem ipsum"})}),nt=()=>null,ot=n.div`
-    transition: all ${({value:e})=>e};
-
-    padding-left: 0px;
-    &:hover {
-        padding-left: 100px;
-    }
-`,it=({value:e})=>t.jsx(ot,{value:e,children:t.jsx("p",{children:"Hover me, please 🙏"})}),st=({value:e})=>null,at=n.div`
-    width: 64px;
-    height: 64px;
-    color: white;
-    background: ${({value:e})=>e};
-`,dt=({value:e})=>t.jsx(at,{value:e}),lt={"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"},$={color:"fgColor",lineHeight:"lineHeightPixels",shadow:"boxShadow",borderImage:"borderImage",offset:"size",x1:"easingCoordinate",y1:"easingCoordinate",x2:"easingCoordinate",y2:"easingCoordinate",short:"duration",function:"easing",functionName:"easing"},ct={background:{renderer:dt},bgColor:{renderer:pe},borderColor:{renderer:ue},borderImage:{renderer:fe},borderRadius:{renderer:je},brightness:{renderer:ke},color:{renderer:Xe},fgColor:{renderer:Ce},fontFamily:{renderer:S},fontSize:{renderer:Re},fontWeight:{renderer:Pe},fontStyle:{renderer:Ie},letterSpacing:{renderer:Ne},gap:{renderer:k},height:{renderer:ze},horizontalPadding:{renderer:b},lineHeightRatio:{renderer:Me},lineHeightPixels:{renderer:Ae},outlineColor:{renderer:Ve},outlineOffset:{renderer:Ke},outlineWidth:{renderer:Ye},borderWidth:{renderer:we},padding:{renderer:b},size:{renderer:b},space:{renderer:k},boxShadow:{renderer:Te},typeface:{renderer:S},verticalPadding:{renderer:b},textDecoration:{renderer:et},duration:{renderer:rt},easing:{renderer:nt},transition:{renderer:it},easingCoordinate:{renderer:st}};function ht(e){const r=Object.entries(lt).find(([i])=>e.startsWith(i));return r&&r[1]}function gt(e){const r=e.split(".").pop()||"";return r in $?$[r]:r}function pt(e){const r=ht(e.name)||gt(e.name)||"";return ct[r]}const xt=e=>{const r=pt(e);if(!r)throw new Error(`No renderer for token "${e.name}".`);return r},ut=n.li`
-    list-style: none;
-    margin-bottom: 32px;
-
-    span[title] {
-        text-align: center;
-        display: block;
-    }
-`,mt=n.p`
-    margin: 0;
-    margin-top: 9px;
-    font-size: 14px;
-`,ft=n.div`
-    padding-top: 6px;
-`,bt=n.p`
-    margin: 0;
-    width: 160px;
-    text-align: right;
-    font-size: 16px;
-    line-height: 32px;
-`;n.div`
-    padding-top: 2px;
-`;const jt=({token:e})=>{const r=Q(e.token),o=xt(e).renderer;return t.jsx(ut,{children:t.jsxs(p,{gap:"16",direction:"column",children:[t.jsxs(w,{gap:"16",columns:["90px","1fr","2fr"],children:[t.jsx(mt,{children:t.jsxs(h,{highlight:"blue",children:["(--",e.id,")"]})}),t.jsxs(p,{direction:"column",gap:"4",children:[t.jsx(y,{variant:"default-semibold",children:e.name}),t.jsxs(y,{variant:"default-regular",children:["@",e.name.replace(/\./g,"-")]})]}),t.jsx(ft,{children:t.jsx(p,{direction:"column",gap:"8",justifyContent:"start",children:e.colorSchemeAware&&t.jsx("div",{children:t.jsx(h,{children:t.jsx("span",{title:"this token may have different values, depending on color scheme",children:"color scheme aware"})})})})})]}),t.jsxs(w,{gap:"64",columns:["auto","1fr"],alignItems:"center",children:[t.jsx(bt,{children:t.jsx("span",{children:r})}),t.jsx("div",{children:t.jsx(o,{name:e.name,value:r})})]})]})})},vt=n.ul`
-    margin: 0;
-    padding: 0;
-`,wt=n.div`
-    font-size: 24px;
-
-    h3 {
-        margin: 0;
-    }
-`,yt={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..."}},Tt=n.h3`
-    margin: 0;
-    font-size: 24px;
-    font-weight: 400;
-`,St=n.h3`
-    font-size: 16px;
-    font-weight: 400;
-`,kt=n.h3`
-    font-size: 16px;
-    font-weight: 400;
-`,$t=({hint:e})=>{const r=e.alternatives||[];return t.jsxs(p,{gap:"24",column:!0,children:[t.jsxs(Tt,{children:["Searching for ",t.jsx(h,{children:e.name}),"?"," "]}),t.jsxs(p,{gap:"8",column:!0,children:[r.length&&t.jsxs(St,{children:["Try searchinng for"," ",r.map((i,o)=>t.jsxs(t.Fragment,{children:[t.jsx(h,{children:i},i),o+2<r.length?", ":"",o+2===r.length?" or ":"",o===r.length-1?" ":""]})),"instead."]}),e.note&&t.jsxs(kt,{children:[t.jsx("strong",{children:"Note:"})," ",e.note]})]})]})},Ct=({terms:e})=>e?t.jsx(t.Fragment,{children:Object.entries(yt).map(([r,i])=>e.toLowerCase().indexOf(r)>-1&&t.jsx($t,{hint:i},r))}):null,Dt=()=>{const{results:e,terms:r}=j();return e.length?t.jsx(vt,{children:e.map(i=>t.jsx(jt,{token:i},i.id))}):t.jsx(wt,{children:t.jsxs(p,{gap:"24",column:!0,children:[t.jsx("h3",{children:"No tokens found"}),t.jsx(Ct,{terms:r})]})})},Lt=n.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"};
-    }
-`,Rt=n.select`
-    padding: 5px 10px;
-`,Ht=({onChange:e})=>{const{colorScheme:r,setColorScheme:i}=j(),o=a.useCallback(s=>{var l;const d=s.target.value;(l=window==null?void 0:window.localStorage)==null||l.setItem("storybook.ds-color-scheme",d),i(d??void 0),e==null||e(d)},[e,i]);return t.jsxs(Lt,{isNotDefault:!!r,children:[t.jsx("label",{children:"Color Scheme"}),t.jsxs(Rt,{value:r,onChange:o,children:[t.jsx("option",{value:"",children:"-- no color scheme --"},"none"),Object.keys(q).map(s=>t.jsx("option",{value:s,children:s},s))]})]})},It=n.div`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: 48px;
-    min-height: 24px;
-    font-size: 16px;
-
-    p {
-        margin: 0;
-    }
-
-    a {
-        color: #0077b3;
-    }
-`,_t=({id:e})=>t.jsxs(t.Fragment,{children:["Searching for token ID ",t.jsx(h,{highlight:"blue",children:e}),"."]}),Pt=({terms:e,colorScheme:r,results:i})=>t.jsxs(t.Fragment,{children:["Found ",i.length," results matching"," ",t.jsx(h,{highlight:"green",children:e})," ",r?t.jsxs(t.Fragment,{children:["within ",t.jsx(h,{highlight:"green",children:"color scheme aware"})," ","tokens."]}):t.jsx(t.Fragment,{children:"within tokens without color scheme."})]}),Ft=({colorScheme:e,results:r})=>t.jsx(t.Fragment,{children:e?t.jsxs(t.Fragment,{children:["Showing all ",t.jsx(h,{highlight:"blue",children:r.length})," ","tokens that are"," ",t.jsx(h,{highlight:"green",children:"color scheme aware"}),"."]}):t.jsxs(t.Fragment,{children:["Showing all ",t.jsx(h,{highlight:"blue",children:r.length})," ","color scheme anostic tokens."]})}),zt=()=>{const{terms:e,colorScheme:r,results:i}=j(),o=(e==null?void 0:e.startsWith("--"))&&(e==null?void 0:e.substring(2));return t.jsx(It,{children:t.jsxs("p",{children:[o&&t.jsx(_t,{id:o}),e&&!o&&t.jsx(Pt,{terms:e,colorScheme:r,results:i}),!e&&!o&&t.jsx(Ft,{colorScheme:r,results:i})," ",r&&t.jsx("a",{href:"./?path=/story/guides-color-schemes-intro--page",children:"Learn more"})]})})},Et=n.div`
-    position: relative;
-    margin-top: -20px;
-    padding-bottom: 200px;
-    h1 {
-        margin: 0;
-    }
-`,Nt=n.div`
-    position: fixed;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-    display: flex;
-    justify-content: center;
-    padding: 20px 20px 24px;
-    gap: 16px;
-    background: white;
-`,Ot=n.div`
-    width: 100%;
-    max-width: 1000px;
-    margin: 0 auto;
-`,At=n.input`
-    flex: 1;
-    padding: 8px;
-    font-size: 16px;
-    height: 32px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: ${({terms:e})=>e?"orange;":"#ccc"};
-`,Bt=()=>{const{theme:e}=H(),{themes:r}=R(),{setTheme:i}=re(),{colorScheme:o,terms:s,setColorScheme:d,setSearchTerms:l}=j(),m=a.useMemo(()=>{var c;return new URL(((c=window.top)==null?void 0:c.location.href)||"")},[]),g=m.searchParams,u=g.get("theme"),f=u&&(r==null?void 0:r.find(c=>c.name===u)),x=g.get("colorScheme"),v=g.get("terms");a.useEffect(()=>{var c;u&&(u!==e.name&&i&&f&&i(f),u&&x!==o&&d(x),l(v||"")),g.delete("theme"),g.delete("colorScheme"),g.delete("terms"),(c=window.top)==null||c.history.replaceState({},"",m)},[]);const P=a.useCallback(c=>l(c),[l]);return t.jsx(Et,{children:t.jsx(Nt,{children:t.jsx(Ot,{children:t.jsxs(p,{gap:"16",direction:"column",children:[t.jsx(p,{justifyContent:"space-between",alignItems:"start",children:t.jsx("h1",{id:"tokens",className:"sbdocs sbdocs-h1 css-1j28tt",children:"Token Explorer"})}),t.jsxs(p,{gap:"8",nowrap:!0,children:[t.jsx(At,{terms:s,type:"text",placeholder:"examples: teal, 300, action, primary, xs, --4adef, #00, 12px",onChange:c=>P(c.target.value),value:s}),t.jsx(Ht,{})]}),t.jsx(zt,{})]})})})})};function C(e){return t.jsxs(t.Fragment,{children:[t.jsx(K,{title:"Guides/Token Explorer"}),`
-`,t.jsx(G,{theme:"tokyo-ui",children:t.jsxs(he,{children:[t.jsx(Bt,{}),t.jsx(Y,{children:t.jsx(Dt,{})})]})})]})}function ir(e={}){const{wrapper:r}={...U(),...e.components};return r?t.jsx(r,{...e,children:t.jsx(C,{...e})}):C()}export{ir as default};

package/dist/assets/00.using-responsive-props-BhAkr9Gn.js

@@ -1,18 +0,0 @@
-import{r as w,u as x,v as h,w as j,g as f,j as e,A as g,M as b}from"./iframe-B_74HtSc.js";import{useMDXComponents as o}from"./index-DWFFXgf1.js";import{f as y}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{w as t}from"./componentNames-hc9KR2nX.js";import{A as C}from"./constants-5om8Ptru.js";import{B as N}from"./breakpoints-BfMlrtxE.js";import"./preload-helper-Dp1pzeXC.js";const R="Avatar__ENaap",M={Avatar:R,"Avatar--size-24":"Avatar--size-24__ObR4y","Avatar--size-32":"Avatar--size-32__dN-5k","Avatar--size-48":"Avatar--size-48__ddqP8","Avatar--size-64":"Avatar--size-64__-Ju7I","Avatar--size-96":"Avatar--size-96__KgHP3","Avatar--size-160":"Avatar--size-160__KZ0Fc","Avatar--narrow-l--size-24":"Avatar--narrow-l--size-24__qXCWM","Avatar--narrow-l--size-32":"Avatar--narrow-l--size-32__qq9TP","Avatar--narrow-l--size-48":"Avatar--narrow-l--size-48__h51Bn","Avatar--narrow-l--size-64":"Avatar--narrow-l--size-64__LnrZ9","Avatar--narrow-l--size-96":"Avatar--narrow-l--size-96__n3HEe","Avatar--narrow-l--size-160":"Avatar--narrow-l--size-160__1zjWL","Avatar--medium-s--size-24":"Avatar--medium-s--size-24__7-PF9","Avatar--medium-s--size-32":"Avatar--medium-s--size-32__kS7dJ","Avatar--medium-s--size-48":"Avatar--medium-s--size-48__7rHLm","Avatar--medium-s--size-64":"Avatar--medium-s--size-64__eSycG","Avatar--medium-s--size-96":"Avatar--medium-s--size-96__gMO59","Avatar--medium-s--size-160":"Avatar--medium-s--size-160__VHYbX","Avatar--medium-l--size-24":"Avatar--medium-l--size-24__wkAJa","Avatar--medium-l--size-32":"Avatar--medium-l--size-32__ZX2QH","Avatar--medium-l--size-48":"Avatar--medium-l--size-48__17P3w","Avatar--medium-l--size-64":"Avatar--medium-l--size-64__FpM1G","Avatar--medium-l--size-96":"Avatar--medium-l--size-96__5-hlk","Avatar--medium-l--size-160":"Avatar--medium-l--size-160__fa-Bb","Avatar--wide-s--size-24":"Avatar--wide-s--size-24__ggmeN","Avatar--wide-s--size-32":"Avatar--wide-s--size-32__J7HvU","Avatar--wide-s--size-48":"Avatar--wide-s--size-48__FDJLh","Avatar--wide-s--size-64":"Avatar--wide-s--size-64__qE9HQ","Avatar--wide-s--size-96":"Avatar--wide-s--size-96__yjySN","Avatar--wide-s--size-160":"Avatar--wide-s--size-160__sQ83p","Avatar--wide-l--size-24":"Avatar--wide-l--size-24__lammM","Avatar--wide-l--size-32":"Avatar--wide-l--size-32__hM5mX","Avatar--wide-l--size-48":"Avatar--wide-l--size-48__mLV4a","Avatar--wide-l--size-64":"Avatar--wide-l--size-64__uQV-R","Avatar--wide-l--size-96":"Avatar--wide-l--size-96__nbICp","Avatar--wide-l--size-160":"Avatar--wide-l--size-160__gRCi9","Avatar--round":"Avatar--round__Ndyn3"},r=w.forwardRef(function({size:a=g,round:i,src:l,alt:m="",dataset:v,crossOrigin:A,..._},z){const p=i??!0,u=x(M,t.Avatar,[h("size",a),j("round",void 0,p)]),c={...y(_),ref:z,className:u.join(" "),...f(v,{preplyDsComponent:t.Avatar})};return e.jsx("picture",{...c,children:e.jsx("img",{src:l||C,alt:m,crossOrigin:A})})});r.__docgenInfo={description:"",methods:[],displayName:"Avatar",props:{size:{defaultValue:{value:"'32'",computed:!1},required:!1},alt:{defaultValue:{value:'""',computed:!1},required:!1}}};const E=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(N).map(([s,a])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:s})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[a,"px"]})})]},s))})}),n="./assets/avatar-1.png";function d(s){const a={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(b,{title:"Guides/Responsive Props"}),`
-`,e.jsx(a.h1,{id:"responsive-props",children:"Responsive Props"}),`
-`,e.jsx(a.p,{children:`Some component props optionally accept responsive values for different screen sizes
-based on the global breakpoints:`}),`
-`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-jsx",children:`<Component prop={<value>} />
-<Component prop={{ _: <value>, '<breakpoint>': <value>, ... }} />
-`})}),`
-`,e.jsxs(a.p,{children:["Where ",e.jsx(a.code,{children:"_"})," is the value for the smallest breakpoint, and ",e.jsx(a.code,{children:"<breakpoint>"}),` is one of
-the following, predefined values:`]}),`
-`,e.jsx(E,{}),`
-`,e.jsx(a.h2,{id:"example",children:"Example"}),`
-`,`
-`,e.jsx(r,{src:n,size:"24"}),`
-`,e.jsx(r,{src:n,size:{_:"24","medium-l":"48","wide-s":"64"}}),`
-`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-jsx",children:`<Avatar src={url} size="24" />
-<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />
-`})}),`
-`,e.jsxs(a.p,{children:["Try resizing your viewport using the dev tools to see the ",e.jsx(a.code,{children:"Avatar"})," size update."]})]})}function H(s={}){const{wrapper:a}={...o(),...s.components};return a?e.jsx(a,{...s,children:e.jsx(d,{...s})}):d(s)}export{H as default,n as url};

package/dist/assets/01-2pw2iC19.css

@@ -1 +0,0 @@
-.Button__lJRiF .leadingIcon__OZj4E,.Button__lJRiF .trailingIcon__d6fiW{display:-webkit-box;display:-ms-flexbox;display:flex}.Button__lJRiF .leadingIcon__OZj4E svg path,.Button__lJRiF .trailingIcon__d6fiW svg path{fill:currentColor}.Button__lJRiF .leadingIcon__OZj4E{margin-left:calc(-1 * var(--53860b))}.Button__lJRiF .trailingIcon__d6fiW{margin-right:calc(-1 * var(--53860b))}.Button--size-s__02RwJ .icon__M1Hs-,.Button--size-m__m1kGp .icon__M1Hs-,.Button--size-small__hrJyO .icon__M1Hs-,.Button--size-medium__ToEik .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--size-s__02RwJ .icon__M1Hs- svg,.Button--size-m__m1kGp .icon__M1Hs- svg,.Button--size-small__hrJyO .icon__M1Hs- svg,.Button--size-medium__ToEik .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--size-l__rHzPz .icon__M1Hs-,.Button--size-large__2ARbP .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--size-l__rHzPz .icon__M1Hs- svg,.Button--size-large__2ARbP .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}@media (min-width: 400px){.Button--narrow-l--size-s__1iIxT .icon__M1Hs-,.Button--narrow-l--size-m__Hn-71 .icon__M1Hs-,.Button--narrow-l--size-small__clOC0 .icon__M1Hs-,.Button--narrow-l--size-medium__4CZXu .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--narrow-l--size-s__1iIxT .icon__M1Hs- svg,.Button--narrow-l--size-m__Hn-71 .icon__M1Hs- svg,.Button--narrow-l--size-small__clOC0 .icon__M1Hs- svg,.Button--narrow-l--size-medium__4CZXu .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--narrow-l--size-l__VsnrA .icon__M1Hs-,.Button--narrow-l--size-large__NNkfS .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--narrow-l--size-l__VsnrA .icon__M1Hs- svg,.Button--narrow-l--size-large__NNkfS .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 700px){.Button--medium-s--size-s__JOAqd .icon__M1Hs-,.Button--medium-s--size-m__hQdSS .icon__M1Hs-,.Button--medium-s--size-small__EweV7 .icon__M1Hs-,.Button--medium-s--size-medium__72Buq .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--medium-s--size-s__JOAqd .icon__M1Hs- svg,.Button--medium-s--size-m__hQdSS .icon__M1Hs- svg,.Button--medium-s--size-small__EweV7 .icon__M1Hs- svg,.Button--medium-s--size-medium__72Buq .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--medium-s--size-l__cRcEp .icon__M1Hs-,.Button--medium-s--size-large__PaPLT .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--medium-s--size-l__cRcEp .icon__M1Hs- svg,.Button--medium-s--size-large__PaPLT .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 880px){.Button--medium-l--size-s__FrGUu .icon__M1Hs-,.Button--medium-l--size-m__SWC53 .icon__M1Hs-,.Button--medium-l--size-small__36CyE .icon__M1Hs-,.Button--medium-l--size-medium__ySDr1 .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--medium-l--size-s__FrGUu .icon__M1Hs- svg,.Button--medium-l--size-m__SWC53 .icon__M1Hs- svg,.Button--medium-l--size-small__36CyE .icon__M1Hs- svg,.Button--medium-l--size-medium__ySDr1 .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--medium-l--size-l__ImFHA .icon__M1Hs-,.Button--medium-l--size-large__o93q- .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--medium-l--size-l__ImFHA .icon__M1Hs- svg,.Button--medium-l--size-large__o93q- .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 1200px){.Button--wide-s--size-s__fGKJg .icon__M1Hs-,.Button--wide-s--size-m__qAksG .icon__M1Hs-,.Button--wide-s--size-small__sKZpV .icon__M1Hs-,.Button--wide-s--size-medium__ovQ2U .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--wide-s--size-s__fGKJg .icon__M1Hs- svg,.Button--wide-s--size-m__qAksG .icon__M1Hs- svg,.Button--wide-s--size-small__sKZpV .icon__M1Hs- svg,.Button--wide-s--size-medium__ovQ2U .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--wide-s--size-l__MTeN9 .icon__M1Hs-,.Button--wide-s--size-large__vQ0OS .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--wide-s--size-l__MTeN9 .icon__M1Hs- svg,.Button--wide-s--size-large__vQ0OS .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}}@media (min-width: 1900px){.Button--wide-l--size-s__ROYdJ .icon__M1Hs-,.Button--wide-l--size-m__4cVoF .icon__M1Hs-,.Button--wide-l--size-small__RU5x9 .icon__M1Hs-,.Button--wide-l--size-medium__Hv0g8 .icon__M1Hs-{margin-top:calc(-1 * var(--f316e1) / 2);margin-bottom:calc(-1 * var(--f316e1) / 2)}.Button--wide-l--size-s__ROYdJ .icon__M1Hs- svg,.Button--wide-l--size-m__4cVoF .icon__M1Hs- svg,.Button--wide-l--size-small__RU5x9 .icon__M1Hs- svg,.Button--wide-l--size-medium__Hv0g8 .icon__M1Hs- svg{width:var(--f316e1);height:var(--f316e1)}.Button--wide-l--size-l__r0ktJ .icon__M1Hs-,.Button--wide-l--size-large__WblYc .icon__M1Hs-{margin-top:calc(-1 * var(--7789ee) / 2);margin-bottom:calc(-1 * var(--7789ee) / 2)}.Button--wide-l--size-l__r0ktJ .icon__M1Hs- svg,.Button--wide-l--size-large__WblYc .icon__M1Hs- svg{width:var(--7789ee);height:var(--7789ee)}}.AlignSelf__huNbz.AlignSelf--align-self-start__Pk4Ld{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--align-self-center__oKqnl{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--align-self-end__mLp7w{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--align-self-stretch__e5jP9{-ms-flex-item-align:stretch;align-self:stretch}@media (min-width: 400px){.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-start__RD68B{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-center__9KYyf{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-end__ydYg3{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-stretch__an8ci{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 700px){.AlignSelf__huNbz.AlignSelf--medium-s--align-self-start__qq8h0{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-center__d0RSi{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-end__Kmsf2{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-stretch__j3NnI{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 880px){.AlignSelf__huNbz.AlignSelf--medium-l--align-self-start__74bsY{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-center__ljw4i{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-end__Pewtw{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-stretch__TkySK{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.AlignSelf__huNbz.AlignSelf--wide-s--align-self-start__zgUOz{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-center__sU3Gp{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-end__o-XTQ{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-stretch__G9OEM{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1900px){.AlignSelf__huNbz.AlignSelf--wide-l--align-self-start__DcXjX{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-center__36VHM{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-end__VolCH{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-stretch__pdrgF{-ms-flex-item-align:stretch;align-self:stretch}}.LayoutGridItem__HXV4b{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;padding:0}

package/dist/assets/01.semantic-tokens-BBQKcQ5o.js

@@ -1,11 +0,0 @@
-import{r as S,u as w,v,z as D,j as e,D as G,g as R,L as U,M as $,aD as g}from"./iframe-B_74HtSc.js";import{useMDXComponents as b}from"./index-DWFFXgf1.js";import{r as y}from"./render-icon-DSbVIpCz.js";import{B as E,H as A}from"./ButtonBase-DGinnt2u.js";import{w as f}from"./componentNames-hc9KR2nX.js";import{g as O,a as H,L as _}from"./LayoutGrid-CUGRXgEO.js";import{f as P}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{b as a}from"./tokens-im-qJUCZ.js";import"./preload-helper-Dp1pzeXC.js";import"./text-centered-CYnBFi3a.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-Dcy7i8oK.js";import"./constants-DYYVurUY.js";const F="Button__lJRiF",M="leadingIcon__OZj4E",V="trailingIcon__d6fiW",q="icon__M1Hs-",u={Button:F,leadingIcon:M,trailingIcon:V,"Button--size-s":"Button--size-s__02RwJ",icon:q,"Button--size-m":"Button--size-m__m1kGp","Button--size-small":"Button--size-small__hrJyO","Button--size-medium":"Button--size-medium__ToEik","Button--size-l":"Button--size-l__rHzPz","Button--size-large":"Button--size-large__2ARbP","Button--narrow-l--size-s":"Button--narrow-l--size-s__1iIxT","Button--narrow-l--size-m":"Button--narrow-l--size-m__Hn-71","Button--narrow-l--size-small":"Button--narrow-l--size-small__clOC0","Button--narrow-l--size-medium":"Button--narrow-l--size-medium__4CZXu","Button--narrow-l--size-l":"Button--narrow-l--size-l__VsnrA","Button--narrow-l--size-large":"Button--narrow-l--size-large__NNkfS","Button--medium-s--size-s":"Button--medium-s--size-s__JOAqd","Button--medium-s--size-m":"Button--medium-s--size-m__hQdSS","Button--medium-s--size-small":"Button--medium-s--size-small__EweV7","Button--medium-s--size-medium":"Button--medium-s--size-medium__72Buq","Button--medium-s--size-l":"Button--medium-s--size-l__cRcEp","Button--medium-s--size-large":"Button--medium-s--size-large__PaPLT","Button--medium-l--size-s":"Button--medium-l--size-s__FrGUu","Button--medium-l--size-m":"Button--medium-l--size-m__SWC53","Button--medium-l--size-small":"Button--medium-l--size-small__36CyE","Button--medium-l--size-medium":"Button--medium-l--size-medium__ySDr1","Button--medium-l--size-l":"Button--medium-l--size-l__ImFHA","Button--medium-l--size-large":"Button--medium-l--size-large__o93q-","Button--wide-s--size-s":"Button--wide-s--size-s__fGKJg","Button--wide-s--size-m":"Button--wide-s--size-m__qAksG","Button--wide-s--size-small":"Button--wide-s--size-small__sKZpV","Button--wide-s--size-medium":"Button--wide-s--size-medium__ovQ2U","Button--wide-s--size-l":"Button--wide-s--size-l__MTeN9","Button--wide-s--size-large":"Button--wide-s--size-large__vQ0OS","Button--wide-l--size-s":"Button--wide-l--size-s__ROYdJ","Button--wide-l--size-m":"Button--wide-l--size-m__4cVoF","Button--wide-l--size-small":"Button--wide-l--size-small__RU5x9","Button--wide-l--size-medium":"Button--wide-l--size-medium__Hv0g8","Button--wide-l--size-l":"Button--wide-l--size-l__r0ktJ","Button--wide-l--size-large":"Button--wide-l--size-large__WblYc"},r=S.forwardRef(function({variant:n=G,size:o=D,url:c,a11yLabel:B,leadingSvgIcon:d,trailingSvgIcon:m,children:j,...h},p){const k=!!d||!!m,z=w(u,f.Button,[v("size",o)]);return e.jsxs(E,{...h,ref:p,isIconButton:!1,variant:n,size:o,url:c,a11yLabel:B,preplyDsComponent:f.Button,className:k?z.join(" "):"",children:[!!d&&e.jsx("span",{className:`${u.icon} ${u.leadingIcon}`,children:y(d,{"aria-hidden":"true",focusable:"false"})}),j,!!m&&e.jsx("span",{className:`${u.icon} ${u.trailingIcon}`,children:y(m,{"aria-hidden":"true",focusable:"false"})})]})});r.__docgenInfo={description:"",methods:[],displayName:"Button",props:{variant:{defaultValue:{value:"'primary'",computed:!1},required:!1},size:{defaultValue:{value:"'small'",computed:!1},required:!1}}};const X="AlignSelf__huNbz",J={AlignSelf:X,"AlignSelf--align-self-start":"AlignSelf--align-self-start__Pk4Ld","AlignSelf--align-self-center":"AlignSelf--align-self-center__oKqnl","AlignSelf--align-self-end":"AlignSelf--align-self-end__mLp7w","AlignSelf--align-self-stretch":"AlignSelf--align-self-stretch__e5jP9","AlignSelf--narrow-l--align-self-start":"AlignSelf--narrow-l--align-self-start__RD68B","AlignSelf--narrow-l--align-self-center":"AlignSelf--narrow-l--align-self-center__9KYyf","AlignSelf--narrow-l--align-self-end":"AlignSelf--narrow-l--align-self-end__ydYg3","AlignSelf--narrow-l--align-self-stretch":"AlignSelf--narrow-l--align-self-stretch__an8ci","AlignSelf--medium-s--align-self-start":"AlignSelf--medium-s--align-self-start__qq8h0","AlignSelf--medium-s--align-self-center":"AlignSelf--medium-s--align-self-center__d0RSi","AlignSelf--medium-s--align-self-end":"AlignSelf--medium-s--align-self-end__Kmsf2","AlignSelf--medium-s--align-self-stretch":"AlignSelf--medium-s--align-self-stretch__j3NnI","AlignSelf--medium-l--align-self-start":"AlignSelf--medium-l--align-self-start__74bsY","AlignSelf--medium-l--align-self-center":"AlignSelf--medium-l--align-self-center__ljw4i","AlignSelf--medium-l--align-self-end":"AlignSelf--medium-l--align-self-end__Pewtw","AlignSelf--medium-l--align-self-stretch":"AlignSelf--medium-l--align-self-stretch__TkySK","AlignSelf--wide-s--align-self-start":"AlignSelf--wide-s--align-self-start__zgUOz","AlignSelf--wide-s--align-self-center":"AlignSelf--wide-s--align-self-center__sU3Gp","AlignSelf--wide-s--align-self-end":"AlignSelf--wide-s--align-self-end__o-XTQ","AlignSelf--wide-s--align-self-stretch":"AlignSelf--wide-s--align-self-stretch__G9OEM","AlignSelf--wide-l--align-self-start":"AlignSelf--wide-l--align-self-start__DcXjX","AlignSelf--wide-l--align-self-center":"AlignSelf--wide-l--align-self-center__36VHM","AlignSelf--wide-l--align-self-end":"AlignSelf--wide-l--align-self-end__VolCH","AlignSelf--wide-l--align-self-stretch":"AlignSelf--wide-l--align-self-stretch__pdrgF"},W="AlignSelf",K=s=>w(J,W,[v("align-self",s)]),Y="LayoutGridItem__HXV4b",Q={LayoutGridItem:Y},x=S.forwardRef(function({children:n,alignSelf:o,tag:c,hide:B,relative:d,dataset:m,...j},h){const p=w(Q,f.LayoutGridItem,[]),k=K(o),z=O(B),L=H(d),I=[...p,...k,...z,...L],N=c??U,C={...P(j),ref:h,className:I.join(" "),...R(m,{preplyDsComponent:f.LayoutGridItem})};return e.jsx(N,{...C,children:n})});x.__docgenInfo={description:"",methods:[],displayName:"LayoutGridItem"};const i=({inverted:s,textToken:n})=>{const o=a.color.text[n];return Array.isArray(o)?e.jsxs(x,{children:[e.jsx(A,{tag:"h4",variant:"medium",children:n}),e.jsx("div",{style:{color:`var(--${o[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${s?a.color.background.primaryInverted[1]:a.color.background.primary[1]})`},children:e.jsxs("code",{children:["color.text.",n]})})]},n):null};i.defaultProps={inverted:!1};const t=({inverted:s,bgToken:n})=>{const o=a.color.background[n];return Array.isArray(o)?e.jsxs(x,{children:[e.jsx(A,{tag:"h4",variant:"medium",children:n}),e.jsxs("div",{style:{background:`var(--${a.color.background[n][1]})`,color:`var(--${s?a.color.text.inverted[1]:a.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",e.jsxs("code",{children:["color.background.",n]})]})]},n):null};t.defaultProps={inverted:!1};const l=({contentToken:s})=>{const n=a.color.border[s];return Array.isArray(n)?e.jsxs(x,{children:[e.jsx(A,{tag:"h4",variant:"medium",children:s}),e.jsx("br",{}),e.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",s]})]},s):null};l.defaultProps={};const Z=()=>e.jsxs(_,{gap:"16",columns:2,children:[e.jsx(r,{children:"Token family: action.variant.primary.*"}),e.jsx(r,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),e.jsx(r,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),e.jsx(r,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),e.jsx(r,{variant:"critical",children:"Token family: action.variant.critical.*"}),e.jsx(r,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),e.jsx(r,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),e.jsx(r,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),ee=()=>e.jsxs(_,{gap:"16",columns:4,children:[e.jsx(i,{textToken:"primary"}),e.jsx(i,{textToken:"secondary"}),e.jsx(i,{textToken:"tertiary"}),e.jsx(i,{textToken:"accentDark"}),e.jsx(i,{textToken:"placeholder"}),e.jsx(i,{textToken:"inverted",inverted:!0}),e.jsx(i,{textToken:"positive"}),e.jsx(i,{textToken:"info"}),e.jsx(i,{textToken:"warning"}),e.jsx(i,{textToken:"critical"})]}),ne=()=>e.jsxs(_,{gap:"16",columns:4,children:[e.jsx(t,{bgToken:"primary"}),e.jsx(t,{bgToken:"secondary"}),e.jsx(t,{bgToken:"tertiary"}),e.jsx(t,{bgToken:"overlay"}),e.jsx(t,{bgToken:"disabled"}),e.jsx(t,{bgToken:"brand"}),e.jsx(t,{bgToken:"brandB2b"}),e.jsx(t,{bgToken:"accentLight"}),e.jsx(t,{bgToken:"accentDark",inverted:!0}),e.jsx(t,{bgToken:"positiveLight"}),e.jsx(t,{bgToken:"positiveDark",inverted:!0}),e.jsx(t,{bgToken:"infoLight"}),e.jsx(t,{bgToken:"infoDark",inverted:!0}),e.jsx(t,{bgToken:"warningLight"}),e.jsx(t,{bgToken:"warningDark",inverted:!0}),e.jsx(t,{bgToken:"criticalLight"}),e.jsx(t,{bgToken:"criticalDark",inverted:!0}),e.jsx(t,{bgToken:"statusOnline"}),e.jsx(t,{bgToken:"statusOffline"}),e.jsx(t,{bgToken:"primaryInverted",inverted:!0}),e.jsx(t,{bgToken:"secondaryInverted",inverted:!0}),e.jsx(t,{bgToken:"tertiaryInverted",inverted:!0})]}),te=()=>e.jsxs(_,{gap:"16",columns:4,children:[e.jsx(l,{contentToken:"primary"}),e.jsx(l,{contentToken:"secondary"}),e.jsx(l,{contentToken:"secondary-opacity"}),e.jsx(l,{contentToken:"tertiary"}),e.jsx(l,{contentToken:"disabled"}),e.jsx(l,{contentToken:"brand"}),e.jsx(l,{contentToken:"critical"}),e.jsx(l,{contentToken:"focus"}),e.jsx(l,{contentToken:"positive"})]});function T(s){const n={h1:"h1",h2:"h2",p:"p",...b(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx($,{title:"Guides/Semantic tokens examples"}),`
-`,e.jsx(n.h1,{id:"semantic-tokens-examples",children:"Semantic tokens examples"}),`
-`,e.jsx(n.p,{children:"With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones."}),`
-`,e.jsx(n.h2,{id:"text-tokens",children:"Text tokens"}),`
-`,e.jsx(g,{children:e.jsx(ee,{})}),`
-`,e.jsx(n.h2,{id:"background-tokens",children:"Background tokens"}),`
-`,e.jsx(g,{children:e.jsx(ne,{})}),`
-`,e.jsx(n.h2,{id:"action",children:"Action"}),`
-`,e.jsx(g,{children:e.jsx(Z,{})}),`
-`,e.jsx(n.h2,{id:"border-tokens",children:"Border tokens"}),`
-`,e.jsx(g,{children:e.jsx(te,{})})]})}function je(s={}){const{wrapper:n}={...b(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(T,{...s})}):T(s)}export{je as default};

package/dist/assets/01.using-shorthand-props-SxccG8oR.js

@@ -1,39 +0,0 @@
-import{j as e,M as d}from"./iframe-B_74HtSc.js";import{useMDXComponents as a}from"./index-DWFFXgf1.js";import"./preload-helper-Dp1pzeXC.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...a(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(d,{title:"Guides/Shorthand Props"}),`
-`,e.jsx(n.h1,{id:"shorthand-props",children:"Shorthand Props"}),`
-`,e.jsxs(n.p,{children:["Some components accept shorthand values for spacing properties like ",e.jsx(n.code,{children:"padding"})," and ",e.jsx(n.code,{children:"margin"}),". These props can be specified in several ways:"]}),`
-`,e.jsx(n.h2,{id:"single-value",children:"Single Value"}),`
-`,e.jsx(n.p,{children:"When you provide a single value, it applies to all sides:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`<Box padding="8" /> // 8px padding on all sides
-`})}),`
-`,e.jsx(n.h2,{id:"two-values",children:"Two Values"}),`
-`,e.jsx(n.p,{children:"When you provide an array with two values, they are applied as [vertical, horizontal]:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`<Box padding={['8', '16']} />
-// 8px padding top/bottom
-// 16px padding left/right
-`})}),`
-`,e.jsx(n.h2,{id:"three-values",children:"Three Values"}),`
-`,e.jsx(n.p,{children:"With three values, they are applied as [top, horizontal, bottom]:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`<Box padding={['8', '16', '24']} />
-// 8px padding top
-// 16px padding left/right
-// 24px padding bottom
-`})}),`
-`,e.jsx(n.h2,{id:"four-values",children:"Four Values"}),`
-`,e.jsx(n.p,{children:"With four values, they are applied as [top, right, bottom, left]:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`<Box padding={['8', '16', '24', '32']} />
-// 8px padding top
-// 16px padding right
-// 24px padding bottom
-// 32px padding left
-`})}),`
-`,e.jsx(n.h2,{id:"combining-with-responsive-props",children:"Combining with Responsive Props"}),`
-`,e.jsx(n.p,{children:"You can combine shorthand values with responsive props:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`<Box
-    padding={{
-        _: '8',
-        'medium-l': ['16', '24'],
-        'wide-s': ['16', '24', '32', '40'],
-    }}
-/>
-`})}),`
-`,e.jsx(n.p,{children:"This allows you to have different padding configurations at different breakpoints."})]})}function t(i={}){const{wrapper:n}={...a(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{t as default};