@preply/ds-docs 0.99.3 → 0.100.0

package/config/main.ts

@@ -32,6 +32,7 @@ const config: StorybookConfig = {
         getAbsolutePath('@storybook/addon-actions'),
         getAbsolutePath('@storybook/addon-links'),
         getAbsolutePath('@storybook/addon-essentials'),
+        getAbsolutePath('@storybook/addon-interactions'),
     ],
     framework: {
         name: getAbsolutePath('@storybook/react-vite'),

package/config/preview.ts

@@ -1,7 +1,7 @@
 import { Preview } from '@storybook/react';
 import { DocContextDSWeb } from '@preply/ds-docs-context';
 
-const newViewports = {
+const viewports = {
     default: {
         name: '_ (320 x 600)',
         styles: {
@@ -51,7 +51,7 @@ const preview: Preview = {
     parameters: {
         layout: 'fullscreen',
         viewport: {
-            viewports: newViewports,
+            viewports,
         },
         backgrounds: {
             default: 'white',

package/dist/assets/{00.applications-DHZVsSdy.js → 00.applications-CK1G494a.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as o}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function r(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as o}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function r(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
 `,e.jsx(n.h1,{id:"installation-applications",children:"Installation: Applications"}),`
 `,e.jsx(n.p,{children:"This guide applies to both client-side and server-side rendered React applications."}),`
 `,e.jsx(n.h2,{id:"packages",children:"Packages"}),`

package/dist/assets/{00.favicons.guide-D81izJzt.js → 00.favicons.guide-DFZstk75.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function o(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Assets/Favicons"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function o(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Assets/Favicons"}),`
 `,e.jsx(n.h1,{id:"favicons",children:"Favicons"}),`
 `,e.jsxs(n.p,{children:["The optimised assets are available under ",e.jsx(n.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers, as well as Android and iOS devices."]}),`
 `,e.jsxs(n.p,{children:["Refer to ",e.jsx(n.a,{href:"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs",rel:"nofollow",children:"How to Favicon in 2022: Six files that fit most needs"})," for a detailed breakdown of the formats."]}),`

package/dist/assets/{00.token-explorer-CWjil9Ir.js → 00.token-explorer-vANGBf-o.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"./index-DSz_1G2r.js";import{ae as F}from"./index-B63D3xRl.js";import{L as p}from"./LayoutFlex-CqUxF-17.js";import{r as c}from"./index-CBqU2yxZ.js";import{g as E,u as O,T as v}from"./Text-DgHyeTqY.js";import{t as H}from"./tokens-D22H5zrO.js";import{i as W,T as d,u as N}from"./TextHighlighted-DAC85mmg.js";import{T as M,d as A,e as B}from"./constants-mdQROz_Y.js";import{e as L,u as D,C as _,c as V}from"./useTheme-BjN7KXjq.js";import{L as y}from"./LayoutGrid-DHbdrEq4.js";import{d as o}from"./styled-components.browser.esm-7AiqoWtv.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./layout-relative-C_vcIuLn.js";import"./classNames-B6WWIGyy.js";import"./constants-DYYVurUY.js";import"./componentNames-IkB29LLe.js";import"./text-accent-2MCF4_sT.js";import"./text-centered-DFkeIlON.js";import"./breakpoints-BfMlrtxE.js";const q=(e,r)=>({token:r,name:e,id:r[M],type:r[A],colorSchemeAware:!!r[B]}),R=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return W(n)?[q(s,n)]:R(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>R(r,i)),Y=X(H),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,a=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||a)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=c.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var C;const U=((C=window==null?void 0:window.localStorage)==null?void 0:C.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}=L(),{theme:i}=D(),[n,s]=c.useState(U),[a,h]=c.useState(""),[g,x]=c.useState([]),u=c.useCallback(m=>s(m),[s]),f=c.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return c.useEffect(()=>{const m=r(n||"base"),w=J(i,m);x(G(w,a,!!n))},[n,r,a,i]),t.jsx(z.Provider,{value:{terms:a,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>c.useContext(z),Z=o.div`
+import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"./index-DSz_1G2r.js";import{ae as F}from"./index-C4kryH8A.js";import{L as p}from"./LayoutFlex-7BcqN14z.js";import{r as c}from"./index-CBqU2yxZ.js";import{g as E,u as O,T as v}from"./Text-oNImySfo.js";import{t as H}from"./tokens-D22H5zrO.js";import{i as W,T as d,u as N}from"./TextHighlighted-DQCrG5_q.js";import{T as M,d as A,e as B}from"./constants-mdQROz_Y.js";import{e as L,u as D,C as _,c as V}from"./useTheme-ByES4oDS.js";import{L as y}from"./LayoutGrid-oqbnuSom.js";import{d as o}from"./styled-components.browser.esm-BUFlhth0.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./layout-relative-BzNtCPD5.js";import"./classNames-Cqk1oqv4.js";import"./constants-DYYVurUY.js";import"./componentNames-BSriaIOD.js";import"./text-accent-DF3GKQFh.js";import"./text-centered-Baai0DNp.js";import"./breakpoints-BfMlrtxE.js";const q=(e,r)=>({token:r,name:e,id:r[M],type:r[A],colorSchemeAware:!!r[B]}),R=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return W(n)?[q(s,n)]:R(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>R(r,i)),Y=X(H),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,a=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||a)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=c.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var C;const U=((C=window==null?void 0:window.localStorage)==null?void 0:C.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}=L(),{theme:i}=D(),[n,s]=c.useState(U),[a,h]=c.useState(""),[g,x]=c.useState([]),u=c.useCallback(m=>s(m),[s]),f=c.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return c.useEffect(()=>{const m=r(n||"base"),w=J(i,m);x(G(w,a,!!n))},[n,r,a,i]),t.jsx(z.Provider,{value:{terms:a,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>c.useContext(z),Z=o.div`
     width: 64px;
     height: 64px;
     color: white;

package/dist/assets/{00.using-responsive-props-qRIXfrtg.js → 00.using-responsive-props-DfMLAuhl.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{A as r}from"./Avatar-CphLWuJi.js";import{ae as p}from"./index-B63D3xRl.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-B6WWIGyy.js";import"./componentNames-IkB29LLe.js";import"./constants--ewUoBsO.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";const c=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(a).map(([n,s])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:n})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[s,"px"]})})]},n))})}),o="./web-lib/src/components/Avatar/docs/static/avatar-1.png";function t(n){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(p,{title:"Guides/Responsive Props"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{A as r}from"./Avatar-CMC1f2ap.js";import{ae as p}from"./index-C4kryH8A.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-Cqk1oqv4.js";import"./componentNames-BSriaIOD.js";import"./constants--ewUoBsO.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";const c=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(a).map(([n,s])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:n})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[s,"px"]})})]},n))})}),o="./web-lib/src/components/Avatar/docs/static/avatar-1.png";function t(n){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(p,{title:"Guides/Responsive Props"}),`
 `,e.jsx(s.h1,{id:"responsive-props",children:"Responsive Props"}),`
 `,e.jsx(s.p,{children:`Some component props optionally accept responsive values for different screen sizes
 based on the global breakpoints:`}),`

package/dist/assets/{01.semantic-tokens-BDJSPe3z.js → 01.semantic-tokens-CXp_pGcs.js}

@@ -1,2 +1,2 @@
-import{j as r}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as k}from"./index-DSz_1G2r.js";import{ae as m}from"./index-B63D3xRl.js";import{H as a,B as s}from"./Heading-CW9tp36r.js";import{L as d}from"./LayoutGrid-DHbdrEq4.js";import{L as l}from"./LayoutGridItem-DtTiBbZm.js";import"./index-CBqU2yxZ.js";import{t as x}from"./tokens-D22H5zrO.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./classNames-B6WWIGyy.js";import"./useHostname-B91Ahm0o.js";import"./componentNames-IkB29LLe.js";import"./index-CC6DAVyL.js";import"./text-accent-2MCF4_sT.js";import"./text-centered-DFkeIlON.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-C_vcIuLn.js";import"./constants-DYYVurUY.js";import"./constants-mdQROz_Y.js";const o=({inverted:t,textToken:n})=>{const c=x.color.text[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsx("div",{style:{color:`var(--${c[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${t?x.color.background.primaryInverted[1]:x.color.background.primary[1]})`},children:r.jsxs("code",{children:["color.text.",n]})})]},n):null};o.defaultProps={inverted:!1};const e=({inverted:t,bgToken:n})=>{const c=x.color.background[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsxs("div",{style:{background:`var(--${x.color.background[n][1]})`,color:`var(--${t?x.color.text.inverted[1]:x.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",r.jsxs("code",{children:["color.background.",n]})]})]},n):null};e.defaultProps={inverted:!1};const i=({contentToken:t})=>{const n=x.color.border[t];return Array.isArray(n)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:t}),r.jsx("br",{}),r.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",t]})]},t):null};i.defaultProps={};const p=()=>r.jsxs(d,{gap:"xs",columns:2,children:[r.jsx(s,{children:"Token family: action.variant.primary.*"}),r.jsx(s,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),r.jsx(s,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),r.jsx(s,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),r.jsx(s,{variant:"critical",children:"Token family: action.variant.critical.*"}),r.jsx(s,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),r.jsx(s,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),r.jsx(s,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),h=()=>r.jsxs("div",{children:[r.jsx(a,{level:"h1",children:"Semantic token examples"}),r.jsx("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."}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Text tokens"}),r.jsx("br",{}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(o,{textToken:"primary"}),r.jsx(o,{textToken:"secondary"}),r.jsx(o,{textToken:"tertiary"}),r.jsx(o,{textToken:"accentDark"}),r.jsx(o,{textToken:"placeholder"}),r.jsx(o,{textToken:"inverted",inverted:!0}),r.jsx(o,{textToken:"positive"}),r.jsx(o,{textToken:"info"}),r.jsx(o,{textToken:"warning"}),r.jsx(o,{textToken:"critical"})]}),r.jsx("br",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Background tokens"}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(e,{bgToken:"primary"}),r.jsx(e,{bgToken:"secondary"}),r.jsx(e,{bgToken:"tertiary"}),r.jsx(e,{bgToken:"overlay"}),r.jsx(e,{bgToken:"disabled"}),r.jsx(e,{bgToken:"brand"}),r.jsx(e,{bgToken:"brandB2b"}),r.jsx(e,{bgToken:"accentLight"}),r.jsx(e,{bgToken:"accentDark",inverted:!0}),r.jsx(e,{bgToken:"positiveLight"}),r.jsx(e,{bgToken:"positiveDark",inverted:!0}),r.jsx(e,{bgToken:"infoLight"}),r.jsx(e,{bgToken:"infoDark",inverted:!0}),r.jsx(e,{bgToken:"warningLight"}),r.jsx(e,{bgToken:"warningDark",inverted:!0}),r.jsx(e,{bgToken:"criticalLight"}),r.jsx(e,{bgToken:"criticalDark",inverted:!0}),r.jsx(e,{bgToken:"statusOnline"}),r.jsx(e,{bgToken:"statusOffline"}),r.jsx(e,{bgToken:"primaryInverted",inverted:!0}),r.jsx(e,{bgToken:"secondaryInverted",inverted:!0}),r.jsx(e,{bgToken:"tertiaryInverted",inverted:!0})]}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Action"}),r.jsx("br",{}),r.jsx(p,{}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Borders"}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(i,{contentToken:"primary"}),r.jsx(i,{contentToken:"secondary"}),r.jsx(i,{contentToken:"secondary-opacity"}),r.jsx(i,{contentToken:"tertiary"}),r.jsx(i,{contentToken:"disabled"}),r.jsx(i,{contentToken:"brand"}),r.jsx(i,{contentToken:"critical"}),r.jsx(i,{contentToken:"focus"}),r.jsx(i,{contentToken:"positive"})]})]});function j(t){return r.jsxs(r.Fragment,{children:[r.jsx(m,{title:"Guides/Semantic tokens examples"}),`
+import{j as r}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as k}from"./index-DSz_1G2r.js";import{ae as m}from"./index-C4kryH8A.js";import{H as a,B as s}from"./Heading-C6cW6qCO.js";import{L as d}from"./LayoutGrid-oqbnuSom.js";import{L as l}from"./LayoutGridItem-CfwR9woQ.js";import"./index-CBqU2yxZ.js";import{t as x}from"./tokens-D22H5zrO.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./classNames-Cqk1oqv4.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./componentNames-BSriaIOD.js";import"./text-accent-DF3GKQFh.js";import"./text-centered-Baai0DNp.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-BzNtCPD5.js";import"./constants-DYYVurUY.js";import"./constants-mdQROz_Y.js";const o=({inverted:t,textToken:n})=>{const c=x.color.text[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsx("div",{style:{color:`var(--${c[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${t?x.color.background.primaryInverted[1]:x.color.background.primary[1]})`},children:r.jsxs("code",{children:["color.text.",n]})})]},n):null};o.defaultProps={inverted:!1};const e=({inverted:t,bgToken:n})=>{const c=x.color.background[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsxs("div",{style:{background:`var(--${x.color.background[n][1]})`,color:`var(--${t?x.color.text.inverted[1]:x.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",r.jsxs("code",{children:["color.background.",n]})]})]},n):null};e.defaultProps={inverted:!1};const i=({contentToken:t})=>{const n=x.color.border[t];return Array.isArray(n)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:t}),r.jsx("br",{}),r.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",t]})]},t):null};i.defaultProps={};const p=()=>r.jsxs(d,{gap:"xs",columns:2,children:[r.jsx(s,{children:"Token family: action.variant.primary.*"}),r.jsx(s,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),r.jsx(s,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),r.jsx(s,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),r.jsx(s,{variant:"critical",children:"Token family: action.variant.critical.*"}),r.jsx(s,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),r.jsx(s,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),r.jsx(s,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),h=()=>r.jsxs("div",{children:[r.jsx(a,{level:"h1",children:"Semantic token examples"}),r.jsx("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."}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Text tokens"}),r.jsx("br",{}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(o,{textToken:"primary"}),r.jsx(o,{textToken:"secondary"}),r.jsx(o,{textToken:"tertiary"}),r.jsx(o,{textToken:"accentDark"}),r.jsx(o,{textToken:"placeholder"}),r.jsx(o,{textToken:"inverted",inverted:!0}),r.jsx(o,{textToken:"positive"}),r.jsx(o,{textToken:"info"}),r.jsx(o,{textToken:"warning"}),r.jsx(o,{textToken:"critical"})]}),r.jsx("br",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Background tokens"}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(e,{bgToken:"primary"}),r.jsx(e,{bgToken:"secondary"}),r.jsx(e,{bgToken:"tertiary"}),r.jsx(e,{bgToken:"overlay"}),r.jsx(e,{bgToken:"disabled"}),r.jsx(e,{bgToken:"brand"}),r.jsx(e,{bgToken:"brandB2b"}),r.jsx(e,{bgToken:"accentLight"}),r.jsx(e,{bgToken:"accentDark",inverted:!0}),r.jsx(e,{bgToken:"positiveLight"}),r.jsx(e,{bgToken:"positiveDark",inverted:!0}),r.jsx(e,{bgToken:"infoLight"}),r.jsx(e,{bgToken:"infoDark",inverted:!0}),r.jsx(e,{bgToken:"warningLight"}),r.jsx(e,{bgToken:"warningDark",inverted:!0}),r.jsx(e,{bgToken:"criticalLight"}),r.jsx(e,{bgToken:"criticalDark",inverted:!0}),r.jsx(e,{bgToken:"statusOnline"}),r.jsx(e,{bgToken:"statusOffline"}),r.jsx(e,{bgToken:"primaryInverted",inverted:!0}),r.jsx(e,{bgToken:"secondaryInverted",inverted:!0}),r.jsx(e,{bgToken:"tertiaryInverted",inverted:!0})]}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Action"}),r.jsx("br",{}),r.jsx(p,{}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Borders"}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(i,{contentToken:"primary"}),r.jsx(i,{contentToken:"secondary"}),r.jsx(i,{contentToken:"secondary-opacity"}),r.jsx(i,{contentToken:"tertiary"}),r.jsx(i,{contentToken:"disabled"}),r.jsx(i,{contentToken:"brand"}),r.jsx(i,{contentToken:"critical"}),r.jsx(i,{contentToken:"focus"}),r.jsx(i,{contentToken:"positive"})]})]});function j(t){return r.jsxs(r.Fragment,{children:[r.jsx(m,{title:"Guides/Semantic tokens examples"}),`
 `,r.jsx(h,{})]})}function U(t={}){const{wrapper:n}={...k(),...t.components};return n?r.jsx(n,{...t,children:r.jsx(j,{...t})}):j()}export{U as default};

package/dist/assets/{10.fonts.guide-BymDLPjJ.js → 10.fonts.guide-il7LsKNk.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Assets/Fonts"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Assets/Fonts"}),`
 `,e.jsx(n.h1,{id:"fonts",children:"Fonts"}),`
 `,e.jsxs(n.p,{children:["The optimised assets are available under ",e.jsx(n.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers."]}),`
 `,e.jsxs(n.p,{children:["Refer to ",e.jsx(n.a,{href:"https://preply.atlassian.net/l/cp/0sQoEgGa",rel:"nofollow",children:"Create new universal brand fonts"})," for a detailed breakdown of the formats, optimisations and technical decisions."]}),`

package/dist/assets/{10.ssr-BcgoUvjg.js → 10.ssr-D7blYPAm.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/SSR/Next.js pages router"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/SSR/Next.js pages router"}),`
 `,e.jsx(n.h1,{id:"installation-nextjs-pages-router",children:"Installation: Next.js pages router"}),`
 `,e.jsxs(n.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
 `,e.jsx(n.h2,{id:"packages",children:"Packages"}),`

package/dist/assets/{11.languageFont.explorer-BifWDX1g.js → 11.languageFont.explorer-wO5p-8ex.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as I}from"./index-DSz_1G2r.js";import{ae as z}from"./index-B63D3xRl.js";import{B as m,H as g}from"./Heading-CW9tp36r.js";import{L as A}from"./LayoutFlex-CqUxF-17.js";import{L as E}from"./LayoutGrid-DHbdrEq4.js";import{u as O,T as y}from"./Text-DgHyeTqY.js";import{T}from"./TextField-Ih_LG6sB.js";import{R as n,r as u}from"./index-CBqU2yxZ.js";import{R as L}from"./RootProvider-36GXWvbu.js";import{d as D}from"./styled-components.browser.esm-7AiqoWtv.js";import{t as c}from"./tokens-D22H5zrO.js";import{u as V}from"./useTheme-BjN7KXjq.js";import{H as S,b}from"./options-Cmszy4eB.js";import{c as B}from"./classNames-B6WWIGyy.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./useHostname-B91Ahm0o.js";import"./componentNames-IkB29LLe.js";import"./index-CC6DAVyL.js";import"./text-accent-2MCF4_sT.js";import"./text-centered-DFkeIlON.js";import"./layout-relative-C_vcIuLn.js";import"./constants-DYYVurUY.js";import"./breakpoints-BfMlrtxE.js";import"./constants-mdQROz_Y.js";import"./constants-DL6gdbsq.js";import"./getInputProps-CQF_KcrT.js";import"./useForcedRef-CC5bJQVj.js";import"./useTextField-IMWr4_ZB.js";import"./constants-BaXVdZRV.js";const U=D.td`
+import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as I}from"./index-DSz_1G2r.js";import{ae as z}from"./index-C4kryH8A.js";import{B as m,H as g}from"./Heading-C6cW6qCO.js";import{L as A}from"./LayoutFlex-7BcqN14z.js";import{L as E}from"./LayoutGrid-oqbnuSom.js";import{u as O,T as y}from"./Text-oNImySfo.js";import{T}from"./TextField-CLxjBvbz.js";import{R as n,r as u}from"./index-CBqU2yxZ.js";import{R as L}from"./RootProvider-BvHSkgDA.js";import{d as D}from"./styled-components.browser.esm-BUFlhth0.js";import{t as c}from"./tokens-D22H5zrO.js";import{u as V}from"./useTheme-ByES4oDS.js";import{H as S,b}from"./options-Cmszy4eB.js";import{c as B}from"./classNames-Cqk1oqv4.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./componentNames-BSriaIOD.js";import"./text-accent-DF3GKQFh.js";import"./text-centered-Baai0DNp.js";import"./layout-relative-BzNtCPD5.js";import"./constants-DYYVurUY.js";import"./breakpoints-BfMlrtxE.js";import"./constants-mdQROz_Y.js";import"./constants-DL6gdbsq.js";import"./getInputProps-CQF_KcrT.js";import"./useForcedRef-CC5bJQVj.js";import"./useTextField-IMWr4_ZB.js";import"./constants-BaXVdZRV.js";const U=D.td`
     width: ${({width:a})=>a?`${a}px`:"auto"};
     padding-top: 0;
     padding-right: ${({horizontalSpace:a})=>a?"40px":"20px"};

package/dist/assets/{11.ssr.app-router-CwVE5pTt.js → 11.ssr.app-router-Dp8fYlX9.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function o(r){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Guides/Installation/SSR/Next.js app router"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function o(r){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Guides/Installation/SSR/Next.js app router"}),`
 `,e.jsx(t.h1,{id:"installation-nextjs-app-router",children:"Installation: Next.js app router"}),`
 `,e.jsxs(t.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(t.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
 `,e.jsx(t.h2,{id:"packages",children:"Packages"}),`

package/dist/assets/{20.libraries-EoIMz0rt.js → 20.libraries-BRDNlWVz.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-B63D3xRl.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-BieS4QGI.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";function i(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Installation/Libraries"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-C4kryH8A.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-DBivcL5k.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function i(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Installation/Libraries"}),`
 `,e.jsx(n.h1,{id:"installation-libraries",children:"Installation: Libraries"}),`
 `,e.jsxs(n.p,{children:["This guide applies to libraries consumed in Preply applications, and assumes these applications are already integrated according to the steps outlined in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
 `,e.jsx(n.h2,{id:"install-packages",children:"Install Packages"}),`