npm - @preply/ds-docs - Versions diffs - 0.98.0 → 0.99.0 - Mend

@preply/ds-docs 0.98.0 → 0.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (244) hide show

package/config/main.ts CHANGED Viewed

@@ -23,6 +23,7 @@ const config: StorybookConfig = {
     stories: [
         join(resolve('../docs-pages'), 'docs/**/*.@(stories.tsx|mdx)'),
         join(resolve('../../packages/web-lib'), 'src/components/**/*.stories.tsx'),
+        join(resolve('../../packages/web-lib'), 'src/components/**/*.mdx'),
     ],
     staticDirs: ['../static', ...getCodeEditorStaticDirs(__filename)],
     addons: [
@@ -38,6 +39,9 @@ const config: StorybookConfig = {
     },
     typescript: {
         reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            include: [join(resolve('../../packages/web-lib'), 'src/components/**/*.tsx')],
+        },
     },
 };

package/dist/assets/{00.applications-CHktEAeI.js → 00.applications-kGdbufkv.js} RENAMED Viewed

@@ -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-B46pI2Oc.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
 `,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-DacbYQzh.js ADDED Viewed

@@ -0,0 +1,21 @@
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
+`,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."]}),`
+`,e.jsx(n.h2,{id:"variants",children:"Variants"}),`
+`,e.jsxs(n.p,{children:["Pick the approriate snippet and add it to the ",e.jsx(n.code,{children:"<head>"})," section of your application."]}),`
+`,e.jsx(n.h3,{id:"preply-logo",children:"Preply logo"}),`
+`,e.jsx("img",{src:"https://static.preply.com/ds/icons/favicon.svg",alt:"Preply logo icon"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- Preply Favicons /story/guides-assets-favicons--page -->
+<link rel="icon" href="https://static.preply.com/ds/icons/rebrand-23-v0/favicon.ico" sizes="any" />
+<link
+    rel="icon"
+    href="https://static.preply.com/ds/icons/rebrand-23-v0/favicon.svg"
+    type="image/svg+xml"
+/>
+<link
+    rel="apple-touch-icon"
+    href="https://static.preply.com/ds/icons/rebrand-23-v0/icon-180.pngg"
+/>
+<link rel="manifest" href="https://static.preply.com/ds/icons/rebrand-23-v0/web.manifest.json" />
+`})})]})}function g(s={}){const{wrapper:n}={...t(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(o,{...s})}):o(s)}export{g as default};

package/dist/assets/{00.token-explorer-CeMnug7t.js → 00.token-explorer-CLMvmndf.js} RENAMED Viewed

@@ -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-B46pI2Oc.js";import{r as c}from"./index-CBqU2yxZ.js";import{g as E,u as O,T as v}from"./Text-BJKNNA5M.js";import{t as H}from"./tokens-CfqDG7zh.js";import{i as W,T as l,u as N}from"./TextHighlighted-Bc02JqSa.js";import{T as M,e as A,g as B,d as o}from"./styled-components.browser.esm-DAuq3cw0.js";import{u as L,a as D,C as _}from"./useTheme-UwDh1RCY.js";import{o as V}from"./mixins-DZk1Zeoo.js";import{L as p}from"./LayoutFlex-hYl5dE5q.js";import{L as y}from"./LayoutGrid-CMRHY4jq.js";import{c as K}from"./useColorScheme-B0seqviK.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./style-inject.es-BI9ztQJ7.js";import"./classNames-C1v60lt_.js";import"./componentNames-Bs6if0Kd.js";import"./useTextAccentClassnames-Z590DgFQ.js";import"./useTextCenteredClassnames-B21nS5IY.js";import"./useLayoutFlexClassNames-QaJAkt8L.js";import"./useLayoutRelativeClassnames-CgeMCRER.js";import"./useLayoutGridResponsiveColumns-KLCFx5pG.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-Cs2Qo7ol.js";import{L as p}from"./LayoutFlex-DnGoKdYS.js";import{r as c}from"./index-CBqU2yxZ.js";import{a as E,u as O,T as v}from"./Text-yZzfLkiX.js";import{t as H}from"./tokens-BV526yo0.js";import{i as W,T as l,u as N}from"./TextHighlighted-BVVlR51u.js";import{T as M,e as A,g as B,d as o}from"./styled-components.browser.esm-D7-R-tx8.js";import{e as L,u as D,C as _,c as V}from"./useTheme-BjN7KXjq.js";import{L as y}from"./LayoutGrid-5ifdLdnP.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./classNames-Dz8Jm24I.js";import"./layout-relative-BhVDEqeE.js";import"./constants-DYYVurUY.js";import"./componentNames-Bs6if0Kd.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;
@@ -66,7 +66,7 @@ import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"
     width: 200px;
     color: white;
-    ${V(`
+    ${K(`
         filter: brightness(${({value:e})=>e});
     `)}
 `,pe=({value:e})=>t.jsx(he,{value:e,children:"hover me"}),xe=o.div`
@@ -279,7 +279,7 @@ import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"
     }
 `,ht=o.select`
     padding: 5px 10px;
-`,pt=({onChange:e})=>{const{colorScheme:r,setColorScheme:i}=j(),n=c.useCallback(s=>{var h;const a=s.target.value;(h=window==null?void 0:window.localStorage)==null||h.setItem("storybook.ds-color-scheme",a),i(a??void 0),e==null||e(a)},[e,i]);return t.jsxs(lt,{isNotDefault:!!r,children:[t.jsx("label",{children:"Color Scheme"}),t.jsxs(ht,{value:r,onChange:n,children:[t.jsx("option",{value:"",children:"-- no color scheme --"},"none"),Object.keys(K).map(s=>t.jsx("option",{value:s,children:s},s))]})]})},xt=o.div`
+`,pt=({onChange:e})=>{const{colorScheme:r,setColorScheme:i}=j(),n=c.useCallback(s=>{var h;const a=s.target.value;(h=window==null?void 0:window.localStorage)==null||h.setItem("storybook.ds-color-scheme",a),i(a??void 0),e==null||e(a)},[e,i]);return t.jsxs(lt,{isNotDefault:!!r,children:[t.jsx("label",{children:"Color Scheme"}),t.jsxs(ht,{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))]})]})},xt=o.div`
     overflow: hidden;
     text-overflow: ellipsis;
     max-height: 48px;
@@ -323,4 +323,4 @@ import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"
     border-width: 1px;
     border-color: ${({terms:e})=>e?"orange;":"#ccc"};
 `,yt=()=>{const{theme:e}=D(),{themes:r}=L(),{setTheme:i}=N(),{colorScheme:n,terms:s,setColorScheme:a,setSearchTerms:h}=j(),g=c.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"),w=x.get("terms");c.useEffect(()=>{var d;u&&(u!==e.name&&i&&f&&i(f),u&&m!==n&&a(m),h(w||"")),x.delete("theme"),x.delete("colorScheme"),x.delete("terms"),(d=window.top)==null||d.history.replaceState({},"",g)},[]);const I=c.useCallback(d=>h(d),[h]);return t.jsx(bt,{children:t.jsx(jt,{children:t.jsx(wt,{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(vt,{terms:s,type:"text",placeholder:"examples: teal, 300, action, primary, xs, --4adef, #00, 12px",onChange:d=>I(d.target.value),value:s}),t.jsx(pt,{})]}),t.jsx(ft,{})]})})})})};function T(e){return t.jsxs(t.Fragment,{children:[t.jsx(F,{title:"Guides/Token Explorer"}),`
-`,t.jsxs(Q,{children:[t.jsx(yt,{}),t.jsx(dt,{})]})]})}function Qt(e={}){const{wrapper:r}={...P(),...e.components};return r?t.jsx(r,{...e,children:t.jsx(T,{...e})}):T()}export{Qt as default};
+`,t.jsxs(Q,{children:[t.jsx(yt,{}),t.jsx(dt,{})]})]})}function Xt(e={}){const{wrapper:r}={...P(),...e.components};return r?t.jsx(r,{...e,children:t.jsx(T,{...e})}):T()}export{Xt as default};

package/dist/assets/00.using-responsive-props-S75pEacQ.js ADDED Viewed

@@ -0,0 +1,18 @@
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{A as r}from"./Avatar-D9lQYtcf.js";import{ae as p}from"./index-Cs2Qo7ol.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-Dz8Jm24I.js";import"./componentNames-Bs6if0Kd.js";import"./constants--ewUoBsO.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
+`,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:`}),`
+`,e.jsx(s.pre,{children:e.jsx(s.code,{className:"language-jsx",children:`<Component prop={<value>} />
+<Component prop={{ _: <value>, '<breakpoint>': <value>, ... }} />
+`})}),`
+`,e.jsxs(s.p,{children:["Where ",e.jsx(s.code,{children:"_"})," is the value for the smallest breakpoint, and ",e.jsx(s.code,{children:"<breakpoint>"}),` is one of
+the following, predefined values:`]}),`
+`,e.jsx(c,{}),`
+`,e.jsx(s.h2,{id:"example",children:"Example"}),`
+`,`
+`,e.jsx(r,{src:o,size:"24"}),`
+`,e.jsx(r,{src:o,size:{_:"24","medium-l":"48","wide-s":"64"}}),`
+`,e.jsx(s.pre,{children:e.jsx(s.code,{className:"language-jsx",children:`<Avatar src={url} size="24" />
+<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />
+`})}),`
+`,e.jsxs(s.p,{children:["Try resizing your viewport using the dev tools to see the ",e.jsx(s.code,{children:"Avatar"})," size update."]})]})}function C(n={}){const{wrapper:s}={...i(),...n.components};return s?e.jsx(s,{...n,children:e.jsx(t,{...n})}):t(n)}export{C as default,o as url};

package/dist/assets/{10.fonts.guide-DjgeFg_o.js → 10.fonts.guide-BgJNemfK.js} RENAMED Viewed

@@ -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-B46pI2Oc.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
 `,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-BEROTC6a.js → 10.ssr-DlH6UKaz.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-B46pI2Oc.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
-`,e.jsx(n.h1,{id:"installation-ssr-applications",children:"Installation: SSR Applications"}),`
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
+`,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"}),`
 `,e.jsxs(n.p,{children:["You will need to install one extra package. ",e.jsx(n.code,{children:"@preply/ds-web-core"}),", which provides you with everything you need to collect stylesheets and CSS classes during SSR time."]}),`
@@ -88,4 +88,4 @@ class MyDocument extends Document<Request & { classNames: string }> {
     }
 }
 `})}),`
-`,e.jsxs(n.p,{children:["See also ",e.jsx(n.a,{href:"https://nextjs.org/docs/advanced-features/custom-document",rel:"nofollow",children:"Next.js official docs"}),"."]})]})}function u(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{u as default};
+`,e.jsxs(n.p,{children:["See also ",e.jsx(n.a,{href:"https://nextjs.org/docs/advanced-features/custom-document",rel:"nofollow",children:"Next.js official docs"}),"."]})]})}function S(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{S as default};

package/dist/assets/{11.languageFont.explorer-Cyv7quON.js → 11.languageFont.explorer-DV7d1sLI.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as I}from"./index-DSz_1G2r.js";import{ae as z}from"./index-B46pI2Oc.js";import{R as n,r as m}from"./index-CBqU2yxZ.js";import{R as O}from"./RootProvider-LL-zBc44.js";import{L as A}from"./LayoutFlex-hYl5dE5q.js";import{L as E}from"./LayoutGrid-CMRHY4jq.js";import{B as g,T,H as u}from"./TextField-gphlYwu9.js";import{u as L,T as y}from"./Text-BJKNNA5M.js";import{d as D}from"./styled-components.browser.esm-DAuq3cw0.js";import{t as c}from"./tokens-CfqDG7zh.js";import{a as V}from"./useTheme-UwDh1RCY.js";import{H as S,b}from"./options-Bw3OpLmh.js";import{f as B}from"./classNames-C1v60lt_.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-nrpnv_Jx.js";import"./index-DrFu-skq.js";import"./useColorScheme-B0seqviK.js";import"./useLayoutFlexClassNames-QaJAkt8L.js";import"./useLayoutRelativeClassnames-CgeMCRER.js";import"./componentNames-Bs6if0Kd.js";import"./useLayoutGridResponsiveColumns-KLCFx5pG.js";import"./breakpoints-BfMlrtxE.js";import"./style-inject.es-BI9ztQJ7.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./useTextCenteredClassnames-B21nS5IY.js";import"./useTextAccentClassnames-Z590DgFQ.js";import"./constants-DL6gdbsq.js";import"./getInputProps-CQF_KcrT.js";import"./useForcedRef-BsHr-Tlv.js";import"./useTextField-D4Wp_okt.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-Cs2Qo7ol.js";import{B as m,T as O,H as g}from"./TextField-IytkCeU9.js";import{L as A}from"./LayoutFlex-DnGoKdYS.js";import{L as E}from"./LayoutGrid-5ifdLdnP.js";import{u as T,T as y}from"./Text-yZzfLkiX.js";import{R as n,r as u}from"./index-CBqU2yxZ.js";import{R as L}from"./RootProvider-CcBxia7g.js";import{d as D}from"./styled-components.browser.esm-D7-R-tx8.js";import{t as c}from"./tokens-BV526yo0.js";import{u as V}from"./useTheme-BjN7KXjq.js";import{H as S,b}from"./options-Bw3OpLmh.js";import{d as B}from"./classNames-Dz8Jm24I.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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-Bs6if0Kd.js";import"./index-CC6DAVyL.js";import"./constants-DL6gdbsq.js";import"./getInputProps-CQF_KcrT.js";import"./useForcedRef-CC5bJQVj.js";import"./useTextField-IMWr4_ZB.js";import"./constants-BaXVdZRV.js";import"./layout-relative-BhVDEqeE.js";import"./constants-DYYVurUY.js";import"./breakpoints-BfMlrtxE.js";const U=D.td`
     width: ${({width:a})=>a?`${a}px`:"auto"};
     padding-top: 0;
     padding-right: ${({horizontalSpace:a})=>a?"40px":"20px"};
     padding-bottom: ${({verticalSpace:a})=>a?"20px":"0px"};
     padding-left: 0;
-`,j=({index:a,id:l,defaultValue:s,resolveToken:i,render:f})=>{const r=L(i?i(l):c.root.text.base.typeface);return n.createElement("tr",null,n.createElement(U,{verticalSpace:!0},n.createElement("span",null,n.createElement("code",null,l))),i&&n.createElement(U,{verticalSpace:!0},r),s&&l===s?n.createElement(U,{verticalSpace:!0},"(default)"):n.createElement(U,null),f&&n.createElement(U,{verticalSpace:!0},f(l,a)))};j.__docgenInfo={description:"",methods:[],displayName:"ThemeOptionsItem"};const H=D.div`
+`,j=({index:a,id:l,defaultValue:s,resolveToken:i,render:f})=>{const r=T(i?i(l):c.root.text.base.typeface);return n.createElement("tr",null,n.createElement(U,{verticalSpace:!0},n.createElement("span",null,n.createElement("code",null,l))),i&&n.createElement(U,{verticalSpace:!0},r),s&&l===s?n.createElement(U,{verticalSpace:!0},"(default)"):n.createElement(U,null),f&&n.createElement(U,{verticalSpace:!0},f(l,a)))};j.__docgenInfo={description:"",methods:[],displayName:"ThemeOptionsItem"};const H=D.div`
     margin-bottom: 20px;
     ${({relevant:a})=>`opacity: ${a?"unset":.5}}`}
 `,h=({component:a,prop:l,options:s,defaultValue:i,resolveToken:f,render:r,hideOptions:F=[],referenceTheme:d})=>{const{theme:{name:k}}=V(),w=s.filter(({id:p})=>!F.includes(p));return n.createElement(H,{relevant:d===void 0||d===k},d?n.createElement("h4",null,"Options (theme: ",d,")"):n.createElement("h4",null,"Options"),n.createElement("table",{style:{fontSize:"14px"}},n.createElement("tbody",null,w.map(({id:p},N)=>n.createElement(j,{key:p,index:N,component:a,prop:l,id:p,defaultValue:i,resolveToken:f,render:r})))))};h.__docgenInfo={description:"",methods:[],displayName:"ThemeOptionsList",props:{hideOptions:{defaultValue:{value:"[]",computed:!1},required:!1}}};const Q=()=>n.createElement("style",{"data-ds-style":"global",dangerouslySetInnerHTML:{__html:`/* Variable fonts */
@@ -1179,7 +1179,7 @@ does not use the correct Thai glyphs for Thai characters.
 [data-preply-ds-theme='tokyo-ui'] * {
     font-family: 'Noto Sans', 'NotoSans-fallback', 'NotoSans-fallback-android', sans-serif;
 }
-`}});Q.__docgenInfo={description:"",methods:[],displayName:"GlobalStyle"};const P=["caption-regular","caption-semibold","small-regular","small-regular-italic","small-semibold","small-semibold-italic","default-regular","default-regular-italic","default-semibold","default-semibold-italic","large-regular","large-regular-italic","large-semibold","large-semibold-italic"],C=[{name:"Русский (Russian)",code:"ru",localized:"Привет, мир!"},{name:"English",code:"en",localized:"Hello, World!"},{name:"Polski",code:"pl",localized:"Cześć, Świecie!"},{name:"Deutsch",code:"de",localized:"Hallo, Welt!"},{name:"Українська (Ukranina)",code:"ua",localized:"Привіт, Світ!"},{name:"Português",code:"pt",localized:"Olá, Mundo!"},{name:"Türkçe",code:"tr",localized:"Merhaba, Dünya!"},{name:"Bahasa",code:"id",localized:"Halo, Dunia!"},{name:"Français",code:"fr",localized:"Bonjour, le monde!"},{name:"Italiano",code:"it",localized:"Ciao, Mondo!"},{name:"Español",code:"es",localized:"¡Hola, Mundo!"},{name:"中文 (Chinese)",code:"zh",localized:"你好，世界！"},{name:"日本語 (Japanese)",code:"ja",localized:"こんにちは、世界！"},{name:"한국어 (Korean)",code:"ko",localized:"안녕하세요, 세계!"},{name:"العربية",code:"ar",localized:"مرحبا بك في عالم البرمجة!"},{name:"Nederlands",code:"nl",localized:"Hallo, wereld!"},{name:"Română",code:"ro",localized:"Salut, Lume!"},{name:"Thai",code:"th",localized:"สวัสดี, โลก!"},{name:"Swedish",code:"sv",localized:"Hej, världen!"},{name:"Czeck",code:"cs",localized:"Ahoj, světe!"}],x={en:!0,ua:!0,th:!0,sv:!0,zh:!0};function _(){const a=localStorage.getItem("selectedLanguages"),[l,s]=m.useState(a?JSON.parse(a):x),[i,f]=m.useState(!1),[r,F]=m.useState("Hello, World!");m.useEffect(()=>{localStorage.setItem("selectedLanguages",JSON.stringify(l))},[l]);const d=o=>{s({...l,[o.target.name]:o.target.checked})},k=()=>{const o=C.reduce((e,R)=>(e[R.code]=!0,e),{});s(o)},w=()=>{s({})},p=()=>{s(x)},N=()=>{f(o=>!o)};return t.jsx("div",{className:"App",children:t.jsxs(A,{column:!0,gap:"32",children:[t.jsx(E,{columns:5,gap:"8",children:C.map(o=>t.jsxs("div",{children:[t.jsx("input",{type:"checkbox",name:o.code,checked:l[o.code]||!1,onChange:d,id:o.code}),t.jsxs("label",{htmlFor:o.code,children:[o.name," (",o.code,")"]})]},o.code))}),t.jsxs(A,{gap:"8",children:[t.jsx(g,{variant:"secondary",onClick:k,children:"Select all languages"}),t.jsx(g,{variant:"secondary",onClick:w,children:"Deselect all languages"}),t.jsx(g,{variant:"ghost",onClick:p,children:"Reset selected languages"}),t.jsx(g,{variant:"ghost",onClick:N,children:"Toggle all text variants"})]}),t.jsx(A,{column:!0,gap:"32",children:t.jsx(T,{label:"English sentence",value:r,onValueChange:F})}),t.jsx(E,{columns:3,gap:"16",children:C.filter(o=>l[o.code]).map(o=>t.jsxs("div",{style:{display:"contents"},children:[t.jsxs("div",{children:[o.name," (",o.code,")"]}),t.jsxs("div",{lang:o.code,children:[t.jsx(y,{accent:"tertiary",children:t.jsx("i",{children:"English sentence"})}),t.jsx(u,{variant:"large",tag:"h2",children:r}),t.jsx(y,{children:r}),i&&t.jsxs(t.Fragment,{children:[t.jsx(h,{component:"Heading",prop:"variant",options:S,render:e=>t.jsx(u,{variant:e,children:r}),resolveToken:e=>c.heading.variant[e].fontSize}),t.jsx(h,{component:"Text",prop:"variant",options:b.filter(({id:e})=>P.includes(e)),defaultValue:B,resolveToken:e=>c.text.variant[e].fontSize,render:e=>t.jsx(y,{variant:e,children:r})})]})]}),t.jsxs("div",{lang:o.code,children:[t.jsx(y,{accent:"tertiary",children:t.jsx("i",{children:"Localized sentence"})}),t.jsx(u,{variant:"large",tag:"h2",children:o.localized}),t.jsx(y,{children:o.localized}),i&&t.jsxs(t.Fragment,{children:[t.jsx(h,{component:"Heading",prop:"variant",options:S,render:e=>t.jsx(u,{variant:e,children:o.localized}),resolveToken:e=>c.heading.variant[e].fontSize}),t.jsx(h,{component:"Text",prop:"variant",options:b.filter(({id:e})=>P.includes(e)),defaultValue:B,resolveToken:e=>c.text.variant[e].fontSize,render:e=>t.jsx(y,{variant:e,children:o.localized})})]})]})]},o.code))})]})})}const q=()=>t.jsxs(t.Fragment,{children:[t.jsx(Q,{}),t.jsx(O,{theme:"tokyo-ui",children:t.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:t.jsx(_,{})})})]});function v(a){const l={h1:"h1",p:"p",...I(),...a.components};return t.jsxs(t.Fragment,{children:[t.jsx(z,{title:"Guides/Assets/Language Font Explorer"}),`
+`}});Q.__docgenInfo={description:"",methods:[],displayName:"GlobalStyle"};const P=["caption-regular","caption-semibold","small-regular","small-regular-italic","small-semibold","small-semibold-italic","default-regular","default-regular-italic","default-semibold","default-semibold-italic","large-regular","large-regular-italic","large-semibold","large-semibold-italic"],C=[{name:"Русский (Russian)",code:"ru",localized:"Привет, мир!"},{name:"English",code:"en",localized:"Hello, World!"},{name:"Polski",code:"pl",localized:"Cześć, Świecie!"},{name:"Deutsch",code:"de",localized:"Hallo, Welt!"},{name:"Українська (Ukranina)",code:"ua",localized:"Привіт, Світ!"},{name:"Português",code:"pt",localized:"Olá, Mundo!"},{name:"Türkçe",code:"tr",localized:"Merhaba, Dünya!"},{name:"Bahasa",code:"id",localized:"Halo, Dunia!"},{name:"Français",code:"fr",localized:"Bonjour, le monde!"},{name:"Italiano",code:"it",localized:"Ciao, Mondo!"},{name:"Español",code:"es",localized:"¡Hola, Mundo!"},{name:"中文 (Chinese)",code:"zh",localized:"你好，世界！"},{name:"日本語 (Japanese)",code:"ja",localized:"こんにちは、世界！"},{name:"한국어 (Korean)",code:"ko",localized:"안녕하세요, 세계!"},{name:"العربية",code:"ar",localized:"مرحبا بك في عالم البرمجة!"},{name:"Nederlands",code:"nl",localized:"Hallo, wereld!"},{name:"Română",code:"ro",localized:"Salut, Lume!"},{name:"Thai",code:"th",localized:"สวัสดี, โลก!"},{name:"Swedish",code:"sv",localized:"Hej, världen!"},{name:"Czeck",code:"cs",localized:"Ahoj, světe!"}],x={en:!0,ua:!0,th:!0,sv:!0,zh:!0};function _(){const a=localStorage.getItem("selectedLanguages"),[l,s]=u.useState(a?JSON.parse(a):x),[i,f]=u.useState(!1),[r,F]=u.useState("Hello, World!");u.useEffect(()=>{localStorage.setItem("selectedLanguages",JSON.stringify(l))},[l]);const d=o=>{s({...l,[o.target.name]:o.target.checked})},k=()=>{const o=C.reduce((e,R)=>(e[R.code]=!0,e),{});s(o)},w=()=>{s({})},p=()=>{s(x)},N=()=>{f(o=>!o)};return t.jsx("div",{className:"App",children:t.jsxs(A,{column:!0,gap:"32",children:[t.jsx(E,{columns:5,gap:"8",children:C.map(o=>t.jsxs("div",{children:[t.jsx("input",{type:"checkbox",name:o.code,checked:l[o.code]||!1,onChange:d,id:o.code}),t.jsxs("label",{htmlFor:o.code,children:[o.name," (",o.code,")"]})]},o.code))}),t.jsxs(A,{gap:"8",children:[t.jsx(m,{variant:"secondary",onClick:k,children:"Select all languages"}),t.jsx(m,{variant:"secondary",onClick:w,children:"Deselect all languages"}),t.jsx(m,{variant:"ghost",onClick:p,children:"Reset selected languages"}),t.jsx(m,{variant:"ghost",onClick:N,children:"Toggle all text variants"})]}),t.jsx(A,{column:!0,gap:"32",children:t.jsx(O,{label:"English sentence",value:r,onValueChange:F})}),t.jsx(E,{columns:3,gap:"16",children:C.filter(o=>l[o.code]).map(o=>t.jsxs("div",{style:{display:"contents"},children:[t.jsxs("div",{children:[o.name," (",o.code,")"]}),t.jsxs("div",{lang:o.code,children:[t.jsx(y,{accent:"tertiary",children:t.jsx("i",{children:"English sentence"})}),t.jsx(g,{variant:"large",tag:"h2",children:r}),t.jsx(y,{children:r}),i&&t.jsxs(t.Fragment,{children:[t.jsx(h,{component:"Heading",prop:"variant",options:S,render:e=>t.jsx(g,{variant:e,children:r}),resolveToken:e=>c.heading.variant[e].fontSize}),t.jsx(h,{component:"Text",prop:"variant",options:b.filter(({id:e})=>P.includes(e)),defaultValue:B,resolveToken:e=>c.text.variant[e].fontSize,render:e=>t.jsx(y,{variant:e,children:r})})]})]}),t.jsxs("div",{lang:o.code,children:[t.jsx(y,{accent:"tertiary",children:t.jsx("i",{children:"Localized sentence"})}),t.jsx(g,{variant:"large",tag:"h2",children:o.localized}),t.jsx(y,{children:o.localized}),i&&t.jsxs(t.Fragment,{children:[t.jsx(h,{component:"Heading",prop:"variant",options:S,render:e=>t.jsx(g,{variant:e,children:o.localized}),resolveToken:e=>c.heading.variant[e].fontSize}),t.jsx(h,{component:"Text",prop:"variant",options:b.filter(({id:e})=>P.includes(e)),defaultValue:B,resolveToken:e=>c.text.variant[e].fontSize,render:e=>t.jsx(y,{variant:e,children:o.localized})})]})]})]},o.code))})]})})}const q=()=>t.jsxs(t.Fragment,{children:[t.jsx(Q,{}),t.jsx(L,{theme:"tokyo-ui",children:t.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:t.jsx(_,{})})})]});function v(a){const l={h1:"h1",p:"p",...I(),...a.components};return t.jsxs(t.Fragment,{children:[t.jsx(z,{title:"Guides/Assets/Language Font Explorer"}),`
 `,t.jsx(l.h1,{id:"language-font-explorer",children:"Language Font Explorer"}),`
 `,t.jsx(l.p,{children:"Here you can visualize how headings and texts are rendered for every single language."}),`
-`,t.jsx(q,{})]})}function Bt(a={}){const{wrapper:l}={...I(),...a.components};return l?t.jsx(l,{...a,children:t.jsx(v,{...a})}):v(a)}export{Bt as default};
+`,t.jsx(q,{})]})}function Ct(a={}){const{wrapper:l}={...I(),...a.components};return l?t.jsx(l,{...a,children:t.jsx(v,{...a})}):v(a)}export{Ct as default};

package/dist/assets/11.ssr.app-router-CTe5FOOM.js ADDED Viewed

@@ -0,0 +1,59 @@
+import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
+`,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"}),`
+`,e.jsxs(t.p,{children:["You will need to install one extra package. ",e.jsx(t.code,{children:"@preply/ds-web-core"}),", which provides you with everything you need to collect stylesheets and CSS classes during SSR time."]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{children:`yarn add @preply/ds-web-core
+`})}),`
+`,e.jsx(t.h2,{id:"create-a-client-component-for-collecting-styles-and-rendering-provider",children:"Create a client component for collecting styles and rendering provider"}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-tsx",children:`'use client';
+import { ReactNode, useState } from 'react';
+import { RootProvider, SSRProvider } from '@preply/ds-web-root';
+import { ServerStyleSheet } from '@preply/ds-web-core';
+import { useServerInsertedHTML } from 'next/navigation';
+const hostname = process.env.PREPLY_HOST; // or any other way to get the hostname
+export const DSProvider = ({ children }: { children: ReactNode }) => {
+    const [stylesheet] = useState(() => new ServerStyleSheet());
+    useServerInsertedHTML(() => {
+        const styles = stylesheet.getStyleElement();
+        return <>{styles}</>;
+    });
+    return (
+        <SSRProvider stylesheet={stylesheet} hostname={hostname}>
+            <RootProvider theme="tokyo-ui" target="none">
+                {children}
+            </RootProvider>
+        </SSRProvider>
+    );
+};
+`})}),`
+`,e.jsx(t.h2,{id:"add-dsprovider-and-the-global-styles-to-the-root-layouttsx",children:"Add DSProvider and the global styles to the root layout.tsx"}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-tsx",children:`import type { Metadata } from 'next';
+import { DSProvider } from '../components/DSProvider';
+import { GlobalStyle } from '@preply/ds-web-root';
+export const metadata: Metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <head>
+                <link rel="preconnect" href="https://static.preply.com" />
+                <GlobalStyle />
+            </head>
+            <body>
+                <DSProvider>{children}</DSProvider>
+            </body>
+        </html>
+    );
+}
+`})}),`
+`,e.jsxs(t.p,{children:["See also ",e.jsx(t.a,{href:"https://nextjs.org/docs/app/building-your-application/styling/css-in-js",rel:"nofollow",children:"Next.js official docs"}),"."]})]})}function S(r={}){const{wrapper:t}={...n(),...r.components};return t?e.jsx(t,{...r,children:e.jsx(o,{...r})}):o(r)}export{S as default};

package/dist/assets/{20.libraries-6ek48Mmj.js → 20.libraries-FWrxmkF1.js} RENAMED Viewed

@@ -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-B46pI2Oc.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-lho9TVh-.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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-Cs2Qo7ol.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C9-tEs2g.js";import"../sb-preview/runtime.js";import"./index-CbwENYX-.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"}),`
 `,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"}),`