@preply/ds-docs 4.0.0 → 5.0.0

package/dist/project.json

@@ -1 +1 @@
-{"generatedAt":1758880097239,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/sinonjs__fake-timers":"8.1.5"},"hasRouterPackage":false,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.8.3"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true,"shouldExtractValuesFromUnion":true,"shouldRemoveUndefinedFromOptional":true,"propFilter":{"skipPropsWithName":"dsInternalSimulation"},"include":["/home/runner/work/design-system/design-system/packages/web-lib/src/components/**/*.tsx"]}},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.5.8","storybookVersionSpecifier":"8.5.8","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-a11y":{"version":"8.5.8"},"@storybook/addon-essentials":{"version":"8.5.8"},"@storybook/addon-links":{"version":"8.5.8"},"@storybook/blocks":{"version":"8.5.8"},"@storybook/components":{"version":"8.5.8"},"@storybook/experimental-addon-test":{"version":"8.5.8"},"@storybook/manager-api":{"version":"8.5.8"},"@storybook/react":{"version":"8.5.8"},"@storybook/react-vite":{"version":"8.5.8"},"@storybook/test":{"version":"8.5.8"},"storybook":{"version":"8.5.8"},"storybook-addon-code-editor":{"version":"3.2.0"}},"addons":{"$SNIP/node_modules/storybook-addon-code-editor":{"version":null},"$SNIP/node_modules/@storybook/addon-a11y":{"version":null},"$SNIP/node_modules/@storybook/addon-actions":{"version":null},"$SNIP/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/@storybook/experimental-addon-test":{"version":null}}}
+{"generatedAt":1759419265655,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/sinonjs__fake-timers":"8.1.5"},"hasRouterPackage":false,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.8.3"},"typescriptOptions":{"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true,"shouldExtractValuesFromUnion":true,"shouldRemoveUndefinedFromOptional":true,"propFilter":{"skipPropsWithName":"dsInternalSimulation"},"include":["/home/runner/work/design-system/design-system/packages/web-lib/src/components/**/*.tsx"]}},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"8.5.8","storybookVersionSpecifier":"8.5.8","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-a11y":{"version":"8.5.8"},"@storybook/addon-essentials":{"version":"8.5.8"},"@storybook/addon-links":{"version":"8.5.8"},"@storybook/blocks":{"version":"8.5.8"},"@storybook/components":{"version":"8.5.8"},"@storybook/experimental-addon-test":{"version":"8.5.8"},"@storybook/manager-api":{"version":"8.5.8"},"@storybook/react":{"version":"8.5.8"},"@storybook/react-vite":{"version":"8.5.8"},"@storybook/test":{"version":"8.5.8"},"storybook":{"version":"8.5.8"},"storybook-addon-code-editor":{"version":"3.2.0"}},"addons":{"$SNIP/node_modules/storybook-addon-code-editor":{"version":null},"$SNIP/node_modules/@storybook/addon-a11y":{"version":null},"$SNIP/node_modules/@storybook/addon-actions":{"version":null},"$SNIP/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/@storybook/experimental-addon-test":{"version":null}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-docs",
-    "version": "4.0.0",
+    "version": "5.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -21,7 +21,7 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^3.2.4",
-        "@preply/ds-i18n": "4.0.0",
+        "@preply/ds-i18n": "5.0.0",
         "@storybook/addon-a11y": "8.5.8",
         "@storybook/addon-essentials": "8.5.8",
         "@storybook/addon-links": "8.5.8",
@@ -43,8 +43,8 @@
         "storybook-addon-code-editor": "^3.2.0",
         "styled-components": "6.1.15",
         "typescript": "5.3.3",
-        "vite": "6.1.1",
+        "vite": "6.3.6",
         "vite-plugin-svgr": "4.3.0"
     },
-    "gitHead": "f3e8f534f561b4d7efd16351c78a8e3a23fe3207"
+    "gitHead": "7fac578722e47a2ea0976d6e5f1f4a6ea7570083"
 }

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

@@ -1,344 +0,0 @@
-import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as P}from"./index-BN6VMYqa.js";import{M as F}from"./index-DUXnyn-Y.js";import{L as p,T as w}from"./LayoutFlex-DOBZGO6b.js";import{r as a}from"./index-Cb9e4tly.js";import{g as E,u as O}from"./useToken-DI8WZBSr.js";import{i as H,T as l,u as N}from"./TextHighlighted-Brfu-LW0.js";import{e as W,d as A,T as M}from"./constants-BgBLeZzp.js";import{t as B}from"./tokens-Xet-VKqC.js";import{e as D,u as R,C as _,c as V}from"./useTheme-DFSR9KPZ.js";import{L as y}from"./LayoutGrid-I5Z1SUgo.js";import{d as o}from"./styled-components.browser.esm-BgpGX317.js";import{o as q}from"./mixins-DZk1Zeoo.js";import"./index-ChsGqxH_.js";import"./iframe-CWj9OKjo.js";import"./index-BPrLDK9Y.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C7hTFOIV.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./defaults-hwJNw1bK.js";import"./componentNames-NXEPEzbR.js";import"./index-DdzHuZ-Y.js";import"./layout-relative.module-1z75aSwo-BeT2Gxbq.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";const K=(e,r)=>({token:r,name:e,id:r[M],type:r[A],colorSchemeAware:!!r[W]}),L=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return H(n)?[K(s,n)]:L(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>L(r,i)),Y=X(B),G=(e,r,i)=>e.filter(n=>{if(r==="-"||r==="--")return!0;if(r!=null&&r.startsWith("--"))return n.id.toLowerCase().startsWith(r.substring(2).toLowerCase());if(r){const s=n.name.toLowerCase().indexOf(r.toLowerCase())>-1,c=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||c)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=a.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var T;const U=((T=window==null?void 0:window.localStorage)==null?void 0:T.getItem("storybook.ds-color-scheme"))||void 0;function J(e,r){return Y.map(n=>({...n,value:`${E(e,r,n.token)}`}))}const Q=({children:e})=>{const{findColorScheme:r}=D(),{theme:i}=R(),[n,s]=a.useState(U),[c,h]=a.useState(""),[g,x]=a.useState([]),u=a.useCallback(m=>s(m),[s]),f=a.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return a.useEffect(()=>{const m=r(n||"base"),v=J(i,m);x(G(v,c,!!n))},[n,r,c,i]),t.jsx(z.Provider,{value:{terms:c,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>a.useContext(z),Z=o.div`
-    width: 64px;
-    height: 64px;
-    color: white;
-    background-color: ${({value:e})=>e};
-`,ee=({value:e})=>t.jsx(Z,{value:e}),te=o.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;
-    }
-`,re=({value:e})=>t.jsx(te,{value:e,children:t.jsx("span",{})}),oe=o.div`
-    width: 48px;
-    height: 48px
-    padding: 8px 0 0 8px;
-    background: ${({value:e})=>e==="white"?"black":"white"};
-    border-image: ${({value:e})=>e};
-
-
-
-`,ne=({value:e})=>t.jsx(oe,{value:e,children:t.jsx("span",{})}),ie=o.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};
-`,se=({value:e})=>t.jsx(ie,{value:e}),ae=o.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;
-    }
-`,ce=({value:e})=>t.jsx(ae,{value:e,children:t.jsx("span",{})}),de=o.div`
-    width: 64px;
-    height: 64px;
-    box-shadow: ${({value:e})=>e};
-`,le=({value:e})=>t.jsx(de,{value:e}),he=o.div`
-    background: #999;
-    font-size: 16px;
-    line-height: 32px;
-    text-align: center;
-    width: 200px;
-    color: white;
-
-    ${q(`
-        filter: brightness(${({value:e})=>e});
-    `)}
-`,pe=({value:e})=>t.jsx(he,{value:e,children:"hover me"}),xe=o.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"};
-`,me=({value:e})=>t.jsx(xe,{value:e,children:"A"}),ue=o.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(ue,{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)"})]}),ge=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-size: ${({value:e})=>e};
-`,fe=({value:e})=>t.jsx(ge,{value:e,children:"Lorem ipsum dolor sit amet"}),be=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-style: ${({value:e})=>e};
-    font-size: 14px;
-`,je=({value:e})=>t.jsx(be,{value:e,children:"Lorem ipsum dolor sit amet."}),ve=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    font-size: 20px;
-    font-weight: ${({value:e})=>e};
-`,we=({value:e})=>t.jsx(ve,{value:e,children:"Lorem ipsum dolor sit amet"}),ye=o.div`
-    height: ${({value:e})=>e};
-    width: 40px;
-    background-color: black;
-`,Se=({value:e})=>t.jsx(ye,{value:e}),$e=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    letter-spacing: ${({value:e})=>e};
-    font-size: 14px;
-`,ke=({value:e})=>t.jsx($e,{value:e,children:"Lorem ipsum dolor sit amet."}),Ce=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    line-height: ${({value:e})=>e};
-    font-size: 14px;
-`,Te=({value:e})=>t.jsx(Ce,{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."}),De=o.div`
-    font-family: PreplyInter;
-    @supports (font-variation-settings: normal) {
-        font-family: PreplyInterV;
-    }
-    line-height: ${({value:e})=>e};
-    font-size: 14px;
-`,Re=({value:e})=>t.jsx(De,{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."}),Le=o.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;
-    }
-`,ze=({value:e})=>t.jsx(Le,{value:e,children:t.jsx("span",{})}),Ie=o.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;
-    }
-`,Pe=({value:e})=>t.jsx(Ie,{value:e,children:t.jsx("span",{})}),Fe=o.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;
-    }
-`,Ee=({value:e})=>t.jsx(Fe,{value:e,children:t.jsx("span",{})}),Oe=o.div`
-    width: 64px;
-    height: 64px;
-    background-color: ${({value:e})=>e};
-`,He=({value:e})=>t.jsx(Oe,{value:e}),Ne=o.div`
-    width: ${({value:e})=>e};
-    height: ${({value:e})=>e};
-    background-color: black;
-`,b=({value:e})=>t.jsx(Ne,{value:e}),We=o.div`
-    width: ${({value:e})=>e};
-    height: 40px;
-    background-color: black;
-`,$=({value:e})=>t.jsx(We,{value:e}),Ae=o.div`
-    text-decoration: ${({value:e})=>e};
-    font-size: 20px;
-    font-weight: 600;
-
-    p:first-child {
-        font-weight: 700;
-    }
-
-    p:last-child {
-        font-weight: 400;
-    }
-`,Me=({value:e})=>t.jsx(Ae,{value:e,children:t.jsx("p",{children:"Lorem ipsum dolor sit amet"})}),Be=o.div`
-    font-family: PreplyInter;
-    font-style: italic;
-    font-variation-settings: ${({value:e})=>e};
-    font-size: 14px;
-`,_e=({value:e})=>t.jsx(Be,{value:e,children:"Lorem ipsum dolor sit amet."}),Ve=o.div`
-    animation: moveBackAndForth ${({value:e})=>e}ms infinite alternate;
-
-    @keyframes moveBackAndForth {
-        from {
-            padding-left: 0px;
-        }
-        to {
-            padding-left: 100px;
-        }
-    }
-`,qe=({value:e})=>t.jsx(Ve,{value:e,children:t.jsx("p",{children:"Lorem ipsum"})}),Ke=()=>null,Xe=o.div`
-    transition: all ${({value:e})=>e};
-
-    padding-left: 0px;
-    &:hover {
-        padding-left: 100px;
-    }
-`,Ye=({value:e})=>t.jsx(Xe,{value:e,children:t.jsx("p",{children:"Hover me, please 🙏"})}),Ge=({value:e})=>null,Ue={"root.size":"size","icon.size":"size","root.space":"space",spacing:"space",sizing:"space","root.radius":"borderRadius",radius:"borderRadius","root.text.size":"fontSize","root.text.base.lineHeight":"lineHeightRatio","root.text.height":"lineHeightPixels","root.text.weight":"fontWeight","dsInternalPrimitive.button.borderWeight":"borderWidth","icon.fieldLayout.width":"horizontalPadding","icon.fieldLayout.height":"horizontalPadding","root.text.spacing":"letterSpacing","root.text.style":"fontStyle","root.text.variation":"variationSettings","root.palette":"color",background:"color","color.border.ai.borderImage":"borderImage",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"},k={color:"fgColor",lineHeight:"lineHeightPixels",shadow:"boxShadow",borderImage:"borderImage",offset:"size",x1:"easingCoordinate",y1:"easingCoordinate",x2:"easingCoordinate",y2:"easingCoordinate",short:"duration",function:"easing",functionName:"easing"},Je={bgColor:{renderer:ee},borderColor:{renderer:re},borderImage:{renderer:ne},borderRadius:{renderer:se},brightness:{renderer:pe},color:{renderer:He},fgColor:{renderer:me},fontFamily:{renderer:S},fontSize:{renderer:fe},fontWeight:{renderer:we},fontStyle:{renderer:je},letterSpacing:{renderer:ke},gap:{renderer:$},height:{renderer:Se},horizontalPadding:{renderer:b},lineHeightRatio:{renderer:Re},lineHeightPixels:{renderer:Te},outlineColor:{renderer:ze},outlineOffset:{renderer:Pe},outlineWidth:{renderer:Ee},borderWidth:{renderer:ce},padding:{renderer:b},size:{renderer:b},space:{renderer:$},boxShadow:{renderer:le},typeface:{renderer:S},variationSettings:{renderer:_e},verticalPadding:{renderer:b},textDecoration:{renderer:Me},duration:{renderer:qe},easing:{renderer:Ke},transition:{renderer:Ye},easingCoordinate:{renderer:Ge}};function Qe(e){const r=Object.entries(Ue).find(([i])=>e.startsWith(i));return r&&r[1]}function Ze(e){const r=e.split(".").pop()||"";return r in k?k[r]:r}function et(e){const r=Qe(e.name)||Ze(e.name)||"";return Je[r]}const tt=e=>{const r=et(e);if(!r)throw new Error(`No renderer for token "${e.name}".`);return r},rt=o.li`
-    list-style: none;
-    margin-bottom: 32px;
-
-    span[title] {
-        text-align: center;
-        display: block;
-    }
-`,ot=o.p`
-    margin: 0;
-    margin-top: 9px;
-    font-size: 14px;
-`,nt=o.div`
-    padding-top: 6px;
-`,it=o.p`
-    margin: 0;
-    width: 160px;
-    text-align: right;
-    font-size: 16px;
-    line-height: 32px;
-`;o.div`
-    padding-top: 2px;
-`;const st=({token:e})=>{const r=O(e.token),n=tt(e).renderer;return t.jsx(rt,{children:t.jsxs(p,{gap:"xs",direction:"column",children:[t.jsxs(y,{gap:"xs",columns:["90px","1fr","2fr"],children:[t.jsx(ot,{children:t.jsxs(l,{highlight:"blue",children:["(--",e.id,")"]})}),t.jsxs(p,{direction:"column",gap:"3xs",children:[t.jsx(w,{variant:"l-medium",children:e.name}),t.jsxs(w,{variant:"m",children:["@",e.name.replace(/\./g,"-")]})]}),t.jsx(nt,{children:t.jsx(p,{direction:"column",gap:"2xs",justifyContent:"start",children:e.colorSchemeAware&&t.jsx("div",{children:t.jsx(l,{children:t.jsx("span",{title:"this token may have different values, depending on color scheme",children:"color scheme aware"})})})})})]}),t.jsxs(y,{gap:"l",columns:["auto","1fr"],alignItems:"center",children:[t.jsx(it,{children:t.jsx("span",{children:r})}),t.jsx("div",{children:t.jsx(n,{name:e.name,value:r})})]})]})})},at=o.ul`
-    margin: 0;
-    padding: 0;
-`,ct=o.div`
-    font-size: 24px;
-
-    h3 {
-        margin: 0;
-    }
-`,dt={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..."}},lt=o.h3`
-    margin: 0;
-    font-size: 24px;
-    font-weight: 400;
-`,ht=o.h3`
-    font-size: 16px;
-    font-weight: 400;
-`,pt=o.h3`
-    font-size: 16px;
-    font-weight: 400;
-`,xt=({hint:e})=>{const r=e.alternatives||[];return t.jsxs(p,{gap:"s",column:!0,children:[t.jsxs(lt,{children:["Searching for ",t.jsx(l,{children:e.name}),"?"," "]}),t.jsxs(p,{gap:"2xs",column:!0,children:[r.length&&t.jsxs(ht,{children:["Try searchinng for"," ",r.map((i,n)=>t.jsxs(t.Fragment,{children:[t.jsx(l,{children:i},i),n+2<r.length?", ":"",n+2===r.length?" or ":"",n===r.length-1?" ":""]})),"instead."]}),e.note&&t.jsxs(pt,{children:[t.jsx("strong",{children:"Note:"})," ",e.note]})]})]})},mt=({terms:e})=>e?t.jsx(t.Fragment,{children:Object.entries(dt).map(([r,i])=>e.toLowerCase().indexOf(r)>-1&&t.jsx(xt,{hint:i},r))}):null,ut=()=>{const{results:e,terms:r}=j();return e.length?t.jsx(at,{children:e.map(i=>t.jsx(st,{token:i},i.id))}):t.jsx(ct,{children:t.jsxs(p,{gap:"s",column:!0,children:[t.jsx("h3",{children:"No tokens found"}),t.jsx(mt,{terms:r})]})})},gt=o.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"};
-    }
-`,ft=o.select`
-    padding: 5px 10px;
-`,bt=({onChange:e})=>{const{colorScheme:r,setColorScheme:i}=j(),n=a.useCallback(s=>{var h;const c=s.target.value;(h=window==null?void 0:window.localStorage)==null||h.setItem("storybook.ds-color-scheme",c),i(c??void 0),e==null||e(c)},[e,i]);return t.jsxs(gt,{isNotDefault:!!r,children:[t.jsx("label",{children:"Color Scheme"}),t.jsxs(ft,{value:r,onChange:n,children:[t.jsx("option",{value:"",children:"-- no color scheme --"},"none"),Object.keys(V).map(s=>t.jsx("option",{value:s,children:s},s))]})]})},jt=o.div`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: 48px;
-    min-height: 24px;
-    font-size: 16px;
-
-    p {
-        margin: 0;
-    }
-
-    a {
-        color: #0077b3;
-    }
-`,vt=({id:e})=>t.jsxs(t.Fragment,{children:["Searching for token ID ",t.jsx(l,{highlight:"blue",children:e}),"."]}),wt=({terms:e,colorScheme:r,results:i})=>t.jsxs(t.Fragment,{children:["Found ",i.length," results matching"," ",t.jsx(l,{highlight:"green",children:e})," ",r?t.jsxs(t.Fragment,{children:["within ",t.jsx(l,{highlight:"green",children:"color scheme aware"})," ","tokens."]}):t.jsx(t.Fragment,{children:"within tokens without color scheme."})]}),yt=({colorScheme:e,results:r})=>t.jsx(t.Fragment,{children:e?t.jsxs(t.Fragment,{children:["Showing all ",t.jsx(l,{highlight:"blue",children:r.length})," ","tokens that are"," ",t.jsx(l,{highlight:"green",children:"color scheme aware"}),"."]}):t.jsxs(t.Fragment,{children:["Showing all ",t.jsx(l,{highlight:"blue",children:r.length})," ","color scheme anostic tokens."]})}),St=()=>{const{terms:e,colorScheme:r,results:i}=j(),n=(e==null?void 0:e.startsWith("--"))&&(e==null?void 0:e.substring(2));return t.jsx(jt,{children:t.jsxs("p",{children:[n&&t.jsx(vt,{id:n}),e&&!n&&t.jsx(wt,{terms:e,colorScheme:r,results:i}),!e&&!n&&t.jsx(yt,{colorScheme:r,results:i})," ",r&&t.jsx("a",{href:"./?path=/story/guides-color-schemes-intro--page",children:"Learn more"})]})})},$t=o.div`
-    position: relative;
-    margin-top: -20px;
-    padding-bottom: 200px;
-    h1 {
-        margin: 0;
-    }
-`,kt=o.div`
-    position: fixed;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-    display: flex;
-    justify-content: center;
-    padding: 20px 20px 24px;
-    gap: 16px;
-    background: white;
-`,Ct=o.div`
-    width: 100%;
-    max-width: 1000px;
-    margin: 0 auto;
-`,Tt=o.input`
-    flex: 1;
-    padding: 8px;
-    font-size: 16px;
-    height: 32px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: ${({terms:e})=>e?"orange;":"#ccc"};
-`,Dt=()=>{const{theme:e}=R(),{themes:r}=D(),{setTheme:i}=N(),{colorScheme:n,terms:s,setColorScheme:c,setSearchTerms:h}=j(),g=a.useMemo(()=>{var d;return new URL(((d=window.top)==null?void 0:d.location.href)||"")},[]),x=g.searchParams,u=x.get("theme"),f=u&&(r==null?void 0:r.find(d=>d.name===u)),m=x.get("colorScheme"),v=x.get("terms");a.useEffect(()=>{var d;u&&(u!==e.name&&i&&f&&i(f),u&&m!==n&&c(m),h(v||"")),x.delete("theme"),x.delete("colorScheme"),x.delete("terms"),(d=window.top)==null||d.history.replaceState({},"",g)},[]);const I=a.useCallback(d=>h(d),[h]);return t.jsx($t,{children:t.jsx(kt,{children:t.jsx(Ct,{children:t.jsxs(p,{gap:"xs",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:"2xs",nowrap:!0,children:[t.jsx(Tt,{terms:s,type:"text",placeholder:"examples: teal, 300, action, primary, xs, --4adef, #00, 12px",onChange:d=>I(d.target.value),value:s}),t.jsx(bt,{})]}),t.jsx(St,{})]})})})})};function C(e){return t.jsxs(t.Fragment,{children:[t.jsx(F,{title:"Guides/Token Explorer"}),`
-`,t.jsxs(Q,{children:[t.jsx(Dt,{}),t.jsx(ut,{})]})]})}function ir(e={}){const{wrapper:r}={...P(),...e.components};return r?t.jsx(r,{...e,children:t.jsx(C,{...e})}):C()}export{ir as default};