@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/10.Combinations.stories-BktZvBWq.js

@@ -0,0 +1,128 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./LayoutFlex-DdWp4cl3.js";import{n as ee,t as te}from"./LayoutFlexItem-DE78Bh3c.js";import{n as ne,r as o,t as s}from"./styled-components.browser.esm-BqKZXl6d.js";function c(e){return(0,u.jsx)(`div`,{style:{background:`yellow`,width:`100%`},children:e.children})}function l(e){return(0,u.jsx)(`div`,{style:{background:`orange`,width:`100%`},children:e.children})}function re(){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`span`,{children:`NowrapUndefined`}),(0,u.jsxs)(a,{dataset:{testid:`NowrapUndefined`},children:[(0,u.jsx)(c,{children:`a`}),(0,u.jsx)(l,{children:`b`})]})]})}function ie(){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`span`,{children:`NowrapTrue`}),(0,u.jsxs)(a,{dataset:{testid:`NowrapTrue`},nowrap:!0,children:[(0,u.jsx)(c,{children:`a`}),(0,u.jsx)(l,{children:`b`})]})]})}function ae(){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`span`,{children:`NowrapFalse`}),(0,u.jsxs)(a,{dataset:{testid:`NowrapFalse`},nowrap:!1,children:[(0,u.jsx)(c,{children:`a`}),(0,u.jsx)(l,{children:`b`})]})]})}var u,d=t((()=>{e(n(),1),i(),u=r()}));function f(e){return(0,m.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function p(e){return(0,m.jsx)(`div`,{style:{background:`orange`},children:e.children})}function oe(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseTrueUndefined`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseTrueUndefined`},column:!0,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function se(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseTrueFalse`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseTrueFalse`},column:!0,reverse:!1,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function ce(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseTrueTrue`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseTrueTrue`},column:!0,reverse:!0,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function le(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseFalseUndefined`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseFalseUndefined`},column:!1,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function ue(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseFalseFalse`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseFalseFalse`},column:!1,reverse:!1,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function de(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseFalseTrue`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseFalseTrue`},column:!1,reverse:!0,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function fe(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseUndefinedUndefined`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseUndefinedUndefined`},children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function pe(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseUndefinedFalse`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseUndefinedFalse`},reverse:!1,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}function me(){return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`span`,{children:`ColumnReverseUndefinedTrue`}),(0,m.jsxs)(a,{dataset:{testid:`ColumnReverseUndefinedTrue`},reverse:!0,children:[(0,m.jsx)(f,{children:`a`}),(0,m.jsx)(p,{children:`b`})]})]})}var m,he=t((()=>{e(n(),1),i(),m=r()}));function h(e){return(0,_.jsx)(`div`,{style:{background:`yellow`,width:`50%`},children:e.children})}function g(e){return(0,_.jsx)(`div`,{style:{background:`orange`,width:`50%`},children:e.children})}function ge(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionRow`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionRow`},direction:`row`,children:[(0,_.jsx)(h,{children:`a`}),(0,_.jsx)(g,{children:`b`})]})]})}function _e(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionRowReverse`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionRowReverse`},direction:`row-reverse`,children:[(0,_.jsx)(h,{children:`a`}),(0,_.jsx)(g,{children:`b`})]})]})}function ve(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionColumn`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionColumn`},direction:`column`,children:[(0,_.jsx)(h,{children:`a`}),(0,_.jsx)(g,{children:`b`})]})]})}function ye(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionColumnReverse`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionColumnReverse`},direction:`column-reverse`,children:[(0,_.jsx)(h,{children:`a`}),(0,_.jsx)(g,{children:`b`})]})]})}function be(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionColumnReverseResponsive`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionColumnReverseResponsive`},direction:{_:`column-reverse`,"narrow-l":`column`,"medium-s":`row-reverse`,"medium-l":`column-reverse`,"wide-s":`column`,"wide-l":`row-reverse`},children:[(0,_.jsx)(h,{children:`A`}),(0,_.jsx)(g,{children:`B`})]})]})}function xe(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`span`,{children:`DirectionColumnReverseResponsiveInvertedOrder`}),(0,_.jsxs)(a,{dataset:{testid:`DirectionColumnReverseResponsiveInvertedOrder`},direction:{"wide-l":`row-reverse`,"wide-s":`column`,"medium-l":`column-reverse`,"medium-s":`row-reverse`,"narrow-l":`column`,_:`column-reverse`},children:[(0,_.jsx)(h,{children:`A`}),(0,_.jsx)(g,{children:`B`})]})]})}var _,Se=t((()=>{e(n(),1),i(),_=r()}));function v(e){return(0,E.jsx)(`div`,{style:{background:`yellow`,width:`20%`},children:e.children})}function y(e){return(0,E.jsx)(`div`,{style:{background:`orange`,width:`20%`},children:e.children})}function Ce(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentCenter`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentCenter`},justifyContent:`center`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function we(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentStart`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentStart`},justifyContent:`start`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function b(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentEnd`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentEnd`},justifyContent:`end`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function x(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentSpaceBetween`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentSpaceBetween`},justifyContent:`space-between`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function S(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentSpaceAround`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentSpaceAround`},justifyContent:`space-around`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function C(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentSpaceEvenly`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentSpaceEvenly`},justifyContent:`space-evenly`,children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function w(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentResponsive`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentResponsive`},justifyContent:{_:`center`,"narrow-l":`end`,"medium-s":`space-around`,"medium-l":`space-around`,"wide-s":`space-evenly`,"wide-l":`end`},children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}function T(){return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`span`,{children:`JustifyContentResponsiveInvertedOrder`}),(0,E.jsxs)(a,{dataset:{testid:`JustifyContentResponsiveInvertedOrder`},justifyContent:{"wide-l":`end`,"wide-s":`space-evenly`,"medium-l":`space-around`,"medium-s":`space-around`,"narrow-l":`end`,_:`center`},children:[(0,E.jsx)(v,{children:`a`}),(0,E.jsx)(y,{children:`b`})]})]})}var E,D=t((()=>{e(n(),1),i(),E=r()}));function O(e){return(0,A.jsx)(`div`,{style:{background:`yellow`,height:`60px`},children:e.children})}function k(e){return(0,A.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Te(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsCenter`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsCenter`},alignItems:`center`,children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function Ee(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsStart`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsStart`},alignItems:`start`,children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function De(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsEnd`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsEnd`},alignItems:`end`,children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function Oe(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsStretch`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsStretch`},alignItems:`stretch`,children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function ke(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsBaseline`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsBaseline`},alignItems:`baseline`,children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function Ae(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsResponsive`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsResponsive`},alignItems:{_:`center`,"narrow-l":`end`,"medium-s":`baseline`,"medium-l":`center`,"wide-s":`stretch`,"wide-l":`end`},children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}function je(){return(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(`span`,{children:`AlignItemsResponsiveInvertedOrder`}),(0,A.jsxs)(a,{dataset:{testid:`AlignItemsResponsiveInvertedOrder`},alignItems:{"wide-l":`end`,"wide-s":`stretch`,"medium-l":`center`,"medium-s":`baseline`,"narrow-l":`end`,_:`center`},children:[(0,A.jsx)(O,{children:`a`}),(0,A.jsx)(k,{children:`b`})]})]})}var A,Me=t((()=>{e(n(),1),i(),A=r()}));function j(e){return(0,P.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function M(e){return(0,P.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Ne(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing0`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing0`},gap:`0`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Pe(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing1`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing1`},gap:`1`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Fe(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing2`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing2`},gap:`2`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Ie(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing4`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing4`},gap:`4`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Le(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing8`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing8`},gap:`8`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Re(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing12`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing12`},gap:`12`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function ze(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing16`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing16`},gap:`16`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Be(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing20`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing20`},gap:`20`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Ve(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing24`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing24`},gap:`24`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function He(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing32`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing32`},gap:`32`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Ue(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing48`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing48`},gap:`48`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function We(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing64`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing64`},gap:`64`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Ge(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing96`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing96`},gap:`96`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function Ke(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`Spacing160`}),(0,P.jsxs)(a,{dataset:{testid:`Spacing160`},gap:`160`,children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function N(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`SpacingResponsive`}),(0,P.jsxs)(a,{dataset:{testid:`SpacingResponsive`},gap:{_:`4`,"narrow-l":`8`,"medium-s":`12`,"medium-l":`16`,"wide-s":`20`,"wide-l":`24`},children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}function qe(){return(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`span`,{children:`SpacingResponsiveInvertedOrder`}),(0,P.jsxs)(a,{dataset:{testid:`SpacingResponsiveInvertedOrder`},gap:{"wide-l":`24`,"wide-s":`20`,"medium-l":`16`,"medium-s":`12`,"narrow-l":`8`,_:`4`},children:[(0,P.jsx)(j,{children:`a`}),(0,P.jsx)(M,{children:`b`})]})]})}var P,Je=t((()=>{e(n(),1),i(),P=r()}));function F(e){return(0,L.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function I(e){return(0,L.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Ye(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing0`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing0`},padding:`0`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function Xe(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing1`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing1`},padding:`1`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function Ze(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing2`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing2`},padding:`2`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function Qe(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing4`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing4`},padding:`4`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function $e(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing8`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing8`},padding:`8`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function et(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing12`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing12`},padding:`12`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function tt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing16`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing16`},padding:`16`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function nt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing20`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing20`},padding:`20`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function rt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing24`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing24`},padding:`24`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function it(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing32`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing32`},padding:`32`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function at(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing48`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing48`},padding:`48`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function ot(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing64`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing64`},padding:`64`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function st(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing96`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing96`},padding:`96`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function ct(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`Spacing160`}),(0,L.jsxs)(a,{dataset:{testid:`Spacing160`},padding:`160`,children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function lt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingResponsive`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingResponsive`},padding:{_:`4`,"narrow-l":`8`,"medium-s":`12`,"medium-l":`16`,"wide-s":`20`,"wide-l":`24`},children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function ut(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingResponsiveInvertedOrder`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingResponsiveInvertedOrder`},padding:{"wide-l":`24`,"wide-s":`20`,"medium-l":`16`,"medium-s":`12`,"narrow-l":`8`,_:`4`},children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function dt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingShorthand2`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingShorthand2`},padding:[`12`,`24`],children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function ft(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingShorthand3`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingShorthand3`},padding:[`12`,`24`,`48`],children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function pt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingShorthand4`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingShorthand4`},padding:[`12`,`24`,`48`,`64`],children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function mt(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingShorthandResponsive`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingShorthandResponsive`},padding:{_:[`1`,`2`,`4`,`8`],"narrow-l":[`12`,`24`,`48`,`64`],"medium-s":[`1`,`2`,`4`,`8`],"medium-l":[`12`,`24`,`48`,`64`],"wide-s":[`1`,`2`,`4`,`8`],"wide-l":[`12`,`24`,`48`,`64`]},children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}function ht(){return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`span`,{children:`SpacingMixResponsive`}),(0,L.jsxs)(a,{dataset:{testid:`SpacingMixResponsive`},padding:{_:[`1`,`2`,`4`,`8`],"narrow-l":`12`,"medium-s":[`1`,`2`],"medium-l":[`12`,`24`,`48`],"wide-s":[`1`,`2`,`4`,`8`],"wide-l":`64`},children:[(0,L.jsx)(F,{children:`a`}),(0,L.jsx)(I,{children:`b`})]})]})}var L,gt=t((()=>{e(n(),1),i(),L=r()}));function R(e){return(0,B.jsx)(`div`,{style:{background:`yellow`,width:`20%`},children:e.children})}function z(e){return(0,B.jsx)(`div`,{style:{background:`orange`,width:`20%`},children:e.children})}function _t(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineTrueUndefined`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineTrueUndefined`},hide:!0,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function vt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineTrueFalse`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineTrueFalse`},hide:!0,inline:!1,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function yt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineTrueTrue`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineTrueTrue`},hide:!0,inline:!0,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function bt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineFalseUndefined`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineFalseUndefined`},hide:!1,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function xt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineFalseFalse`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineFalseFalse`},hide:!1,inline:!1,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function St(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineFalseTrue`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineFalseTrue`},hide:!1,inline:!0,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function Ct(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineUndefinedUndefined`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineUndefinedUndefined`},children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function wt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineUndefinedFalse`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineUndefinedFalse`},inline:!1,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function Tt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineUndefinedTrue`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineUndefinedTrue`},inline:!0,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}function Et(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineResponsive`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineResponsive`},hide:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},inline:!0,children:[(0,B.jsx)(R,{children:`A responsive`}),(0,B.jsx)(z,{children:`B responsive`})]})]})}function Dt(){return(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{children:`HideInlineResponsiveInvertedOrder`}),(0,B.jsxs)(a,{dataset:{testid:`HideInlineResponsiveInvertedOrder`},hide:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},inline:!0,children:[(0,B.jsx)(R,{children:`a`}),(0,B.jsx)(z,{children:`b`})]})]})}var B,Ot=t((()=>{e(n(),1),i(),B=r()}));function V(e){return(0,U.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function H(e){return(0,U.jsx)(`div`,{style:{background:`orange`},children:e.children})}function kt(){return(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`span`,{children:`RelativeTrue`}),(0,U.jsxs)(a,{dataset:{testid:`RelativeTrue`},relative:!0,children:[(0,U.jsx)(V,{children:`a`}),(0,U.jsx)(H,{children:`b`})]})]})}function At(){return(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`span`,{children:`RelativeFalse`}),(0,U.jsxs)(a,{dataset:{testid:`RelativeFalse`},relative:!1,children:[(0,U.jsx)(V,{children:`a`}),(0,U.jsx)(H,{children:`b`})]})]})}function jt(){return(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`span`,{children:`RelativeResponsive`}),(0,U.jsxs)(a,{dataset:{testid:`RelativeResponsive`},relative:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},children:[(0,U.jsx)(V,{children:`a`}),(0,U.jsx)(H,{children:`b`})]})]})}function Mt(){return(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`span`,{children:`RelativeResponsiveInvertedOrder`}),(0,U.jsxs)(a,{dataset:{testid:`RelativeResponsiveInvertedOrder`},relative:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},children:[(0,U.jsx)(V,{children:`a`}),(0,U.jsx)(H,{children:`b`})]})]})}var U,Nt=t((()=>{e(n(),1),i(),U=r()}));function W(e){return(0,K.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function G(e){return(0,K.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Pt(){return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(q,{}),(0,K.jsx)(`span`,{children:`DataOverrideGlobalClass`}),(0,K.jsxs)(a,{dataset:{testid:`DataOverrideGlobalClass`,override:!0},children:[(0,K.jsx)(W,{children:`a`}),(0,K.jsx)(G,{children:`b`})]})]})}function Ft(){return(0,K.jsxs)(K.Fragment,{children:[(0,K.jsx)(`span`,{children:`DataOverrideLocalClass`}),(0,K.jsx)(J,{children:(0,K.jsxs)(a,{dataset:{testid:`DataOverrideLocalClass`,override:!0},children:[(0,K.jsx)(W,{children:`a`}),(0,K.jsx)(G,{children:`b`})]})})]})}var K,q,J,It=t((()=>{e(n(),1),o(),i(),K=r(),q=ne`
+    div[data-override='true'] {
+        display:grid;
+    }
+`,J=s.div`
+    div[data-override='true'] {
+        display: grid;
+    }
+`}));function Lt(e){return(0,Y.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function Rt(e){return(0,Y.jsx)(`div`,{style:{background:`orange`},children:e.children})}function zt(){return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`span`,{children:`Default`}),(0,Y.jsxs)(a,{dataset:{testid:`Default`},children:[(0,Y.jsx)(Lt,{children:`a`}),(0,Y.jsx)(Rt,{children:`b`})]})]})}var Y,Bt=t((()=>{e(n(),1),i(),Y=r()})),X,Z,Q,$;t((()=>{e(n(),1),ee(),i(),d(),he(),Se(),D(),Me(),Je(),gt(),Ot(),Nt(),It(),Bt(),X=r(),Z={title:`components/LayoutFlex`,component:a,tags:[`!autodocs`],subcomponents:{LayoutFlexItem:te},parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`},"wide-s":{viewport:`wide-s`},"wide-l":{viewport:`wide-l`}}}}},Q=()=>(0,X.jsxs)(X.Fragment,{children:[(0,X.jsx)(zt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(re,{}),(0,X.jsx)(ie,{}),(0,X.jsx)(ae,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(oe,{}),(0,X.jsx)(se,{}),(0,X.jsx)(ce,{}),(0,X.jsx)(le,{}),(0,X.jsx)(ue,{}),(0,X.jsx)(de,{}),(0,X.jsx)(fe,{}),(0,X.jsx)(pe,{}),(0,X.jsx)(me,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(ge,{}),(0,X.jsx)(_e,{}),(0,X.jsx)(ve,{}),(0,X.jsx)(ye,{}),(0,X.jsx)(be,{}),(0,X.jsx)(xe,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Ce,{}),(0,X.jsx)(we,{}),(0,X.jsx)(b,{}),(0,X.jsx)(x,{}),(0,X.jsx)(S,{}),(0,X.jsx)(C,{}),(0,X.jsx)(w,{}),(0,X.jsx)(T,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Te,{}),(0,X.jsx)(Ee,{}),(0,X.jsx)(De,{}),(0,X.jsx)(Oe,{}),(0,X.jsx)(ke,{}),(0,X.jsx)(Ae,{}),(0,X.jsx)(je,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Ne,{}),(0,X.jsx)(Pe,{}),(0,X.jsx)(Fe,{}),(0,X.jsx)(Ie,{}),(0,X.jsx)(Le,{}),(0,X.jsx)(Re,{}),(0,X.jsx)(ze,{}),(0,X.jsx)(Be,{}),(0,X.jsx)(Ve,{}),(0,X.jsx)(He,{}),(0,X.jsx)(Ue,{}),(0,X.jsx)(We,{}),(0,X.jsx)(Ge,{}),(0,X.jsx)(Ke,{}),(0,X.jsx)(N,{}),(0,X.jsx)(qe,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Ye,{}),(0,X.jsx)(Xe,{}),(0,X.jsx)(Ze,{}),(0,X.jsx)(Qe,{}),(0,X.jsx)($e,{}),(0,X.jsx)(et,{}),(0,X.jsx)(tt,{}),(0,X.jsx)(nt,{}),(0,X.jsx)(rt,{}),(0,X.jsx)(it,{}),(0,X.jsx)(at,{}),(0,X.jsx)(ot,{}),(0,X.jsx)(st,{}),(0,X.jsx)(ct,{}),(0,X.jsx)(lt,{}),(0,X.jsx)(ut,{}),(0,X.jsx)(dt,{}),(0,X.jsx)(ft,{}),(0,X.jsx)(pt,{}),(0,X.jsx)(mt,{}),(0,X.jsx)(ht,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(_t,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(vt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(yt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(bt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(xt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(St,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Ct,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(wt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Tt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Et,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Dt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(kt,{}),(0,X.jsx)(At,{}),(0,X.jsx)(jt,{}),(0,X.jsx)(Mt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(Pt,{}),(0,X.jsx)(Ft,{})]}),Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`() => <>
+        <Default />
+        <br />
+        <br />
+        <NowrapUndefined />
+        <NowrapTrue />
+        <NowrapFalse />
+        <br />
+        <br />
+        <ColumnReverseTrueUndefined />
+        <ColumnReverseTrueFalse />
+        <ColumnReverseTrueTrue />
+        <ColumnReverseFalseUndefined />
+        <ColumnReverseFalseFalse />
+        <ColumnReverseFalseTrue />
+        <ColumnReverseUndefinedUndefined />
+        <ColumnReverseUndefinedFalse />
+        <ColumnReverseUndefinedTrue />
+        <br />
+        <br />
+        <DirectionRow />
+        <DirectionRowReverse />
+        <DirectionColumn />
+        <DirectionColumnReverse />
+        <DirectionColumnReverseResponsive />
+        <DirectionColumnReverseResponsiveInvertedOrder />
+        <br />
+        <br />
+        <JustifyContentCenter />
+        <JustifyContentStart />
+        <JustifyContentEnd />
+        <JustifyContentSpaceBetween />
+        <JustifyContentSpaceAround />
+        <JustifyContentSpaceEvenly />
+        <JustifyContentResponsive />
+        <JustifyContentResponsiveInvertedOrder />
+        <br />
+        <br />
+        <AlignItemsCenter />
+        <AlignItemsStart />
+        <AlignItemsEnd />
+        <AlignItemsStretch />
+        <AlignItemsBaseline />
+        <AlignItemsResponsive />
+        <AlignItemsResponsiveInvertedOrder />
+        <br />
+        <br />
+        <GapSpacing0 />
+        <GapSpacing1 />
+        <GapSpacing2 />
+        <GapSpacing4 />
+        <GapSpacing8 />
+        <GapSpacing12 />
+        <GapSpacing16 />
+        <GapSpacing20 />
+        <GapSpacing24 />
+        <GapSpacing32 />
+        <GapSpacing48 />
+        <GapSpacing64 />
+        <GapSpacing96 />
+        <GapSpacing160 />
+        <GapSpacingResponsive />
+        <GapSpacingResponsiveInvertedOrder />
+        <br />
+        <br />
+        <PaddingSpacing0 />
+        <PaddingSpacing1 />
+        <PaddingSpacing2 />
+        <PaddingSpacing4 />
+        <PaddingSpacing8 />
+        <PaddingSpacing12 />
+        <PaddingSpacing16 />
+        <PaddingSpacing20 />
+        <PaddingSpacing24 />
+        <PaddingSpacing32 />
+        <PaddingSpacing48 />
+        <PaddingSpacing64 />
+        <PaddingSpacing96 />
+        <PaddingSpacing160 />
+        <PaddingSpacingResponsive />
+        <PaddingSpacingResponsiveInvertedOrder />
+        <SpacingShorthand2 />
+        <SpacingShorthand3 />
+        <SpacingShorthand4 />
+        <SpacingShorthandResponsive />
+        <SpacingMixResponsive />
+        <br />
+        <br />
+        <HideInlineTrueUndefined />
+        <br />
+        <HideInlineTrueFalse />
+        <br />
+        <HideInlineTrueTrue />
+        <br />
+        <HideInlineFalseUndefined />
+        <br />
+        <HideInlineFalseFalse />
+        <br />
+        <HideInlineFalseTrue />
+        <br />
+        <HideInlineUndefinedUndefined />
+        <br />
+        <HideInlineUndefinedFalse />
+        <br />
+        <HideInlineUndefinedTrue />
+        <br />
+        <HideInlineResponsive />
+        <br />
+        <HideInlineResponsiveInvertedOrder />
+        <br />
+        <br />
+        <RelativeTrue />
+        <RelativeFalse />
+        <RelativeResponsive />
+        <RelativeResponsiveInvertedOrder />
+        <br />
+        <br />
+        <DataOverrideGlobalClass />
+        <DataOverrideLocalClass />
+    </>`,...Q.parameters?.docs?.source}}},$=[`Combinations`]}))();export{Q as Combinations,$ as __namedExportsOrder,Z as default};

package/dist/assets/10.fonts.guide-BGeAIZ8f.js

@@ -0,0 +1,39 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Assets/Fonts`}),`
+`,(0,c.jsx)(t.h1,{id:`fonts`,children:`Fonts`}),`
+`,(0,c.jsxs)(t.p,{children:[`The optimised assets are available under `,(0,c.jsx)(t.strong,{children:`preply.com`}),` in the formats required by modern and legacy browsers.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Refer to `,(0,c.jsx)(t.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.`]}),`
+`,(0,c.jsx)(t.p,{children:`You should only follow these instructions if Preply Design System is NOT installed (and can not be installed), in the application.`}),`
+`,(0,c.jsxs)(t.p,{children:[`In all other cases follow the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation Guides`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`tokyo-ui-rebrand-fonts`,children:`Tokyo UI (reBrand) fonts`}),`
+`,(0,c.jsxs)(t.p,{children:[`The Tokyo UI fonts are applied only for descendants of elements with the `,(0,c.jsx)(t.code,{children:`data-preply-brand="tokyo"`}),` attribute.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<div data-preply-ds-theme="tokyo-ui">
+    <!-- All the children use the new fonts -->
+</div>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.a,{href:`https://preply.atlassian.net/browse/DES-1108`,rel:`nofollow`,children:`DES-1108`}),` will fix this.`]}),`
+`,(0,c.jsx)(t.h2,{id:`using-the-assets`,children:`Using the assets`}),`
+`,(0,c.jsxs)(t.p,{children:[`First, in the `,(0,c.jsx)(t.code,{children:`index.html`}),` file, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<!-- Preply Fonts /story/guides-assets-fonts--page -->
+<link rel="preconnect" href="https://static.preply.com" />
+<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
+<link
+    rel="preload"
+    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`This will make `,(0,c.jsx)(t.code,{children:`PreplyInter`}),` available for browsers but not yet apply it to everything on the page. Only text created withing Design System's components will use `,(0,c.jsx)(t.code,{children:`PreplyInter`}),` typeface.`]}),`
+`,(0,c.jsx)(t.p,{children:`Add the following styles as well, also at the top of your cascade, to apply our brand to all the text on the page.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`* {
+    font-family: 'PreplyInter', sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+    * {
+        font-family: 'PreplyInterV', sans-serif;
+    }
+}
+`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/10.ssr--ERdtJ_Z.js

@@ -0,0 +1,91 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/SSR/Next.js pages router`}),`
+`,(0,c.jsx)(t.h1,{id:`installation-nextjs-pages-router`,children:`Installation: Next.js pages router`}),`
+`,(0,c.jsxs)(t.p,{children:[`This guide assumes you have read and followed the steps in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation: Applications`}),` guide.`]}),`
+`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
+`,(0,c.jsxs)(t.p,{children:[`You will need to install one extra package. `,(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),`, which provides you with everything you need to collect stylesheets and CSS classes during SSR time.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add @preply/ds-web-core
+`})}),`
+`,(0,c.jsxs)(t.h2,{id:`instruct-rootprovider-to-not-render-any-css-classes`,children:[`Instruct `,(0,c.jsx)(t.code,{children:`RootProvider`}),` to NOT render any CSS classes`]}),`
+`,(0,c.jsxs)(t.p,{children:[`In the case of SSR, `,(0,c.jsx)(t.code,{children:`document.body`}),` is not available during SSR, so you will need to provide `,(0,c.jsx)(t.code,{children:`target="none"`}),` instead.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { RootProvider } from '@preply/ds-web-root';
+
+export const wrapWithProviders = () => (values: ContextValues) => {
+    return (elements: React.ReactNode) => (
+        ...
+        <NextRouter.Provider value={values.nextRouter}>
+            ...
+            <RootProvider target="none" theme="tokyo-ui">{elements}</RootProvider>
+            ...
+        </NextRouter.Provider>
+        ...
+    );
+};
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`add-the-global-styles`,children:`Add the global styles`}),`
+`,(0,c.jsxs)(t.p,{children:[`In the component that renders your application's HTML document, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { GlobalStyle } from '@preply/ds-web-root';
+
+...
+    return (
+        <html>
+            <head>
+                <link rel="preconnect" href="https://static.preply.com" />
+                <GlobalStyle />
+                ...
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`setup-ssrprovider---ds-context-for-ssr-time`,children:`Setup SSRProvider - DS context for SSR time`}),`
+`,(0,c.jsxs)(t.p,{children:[`Wrap your SSR application with `,(0,c.jsx)(t.code,{children:`SSRProvider`}),` in order to provide a `,(0,c.jsx)(t.code,{children:`hostname`}),` context and collect the "critical" CSS class names and style blocks.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`For more information on this provider visit `,(0,c.jsx)(t.a,{href:`/story/api-ds-web-root-providers-ssrprovider--page`,children:`API / ds-web-root / providers / SSRProvider`}),` reference page.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`The following code is taken from a `,(0,c.jsx)(t.code,{children:`Next.js`}),` application.`]}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`merge `,(0,c.jsx)(t.code,{children:`{ classNames: string }`}),` with the `,(0,c.jsx)(t.code,{children:`Document`}),` props`]}),`
+`,(0,c.jsxs)(t.li,{children:[`create an instance of this class to collect CSS class names and `,(0,c.jsx)(t.code,{children:`<style>`}),` blocks`]}),`
+`,(0,c.jsxs)(t.li,{children:[`wrap SSR rendering with the `,(0,c.jsx)(t.code,{children:`SSRProvider`})]}),`
+`,(0,c.jsxs)(t.li,{children:[`expose CSS class names and the `,(0,c.jsx)(t.code,{children:`<style>`}),` element`]}),`
+`,(0,c.jsxs)(t.li,{children:[`and render the CSS classes in the `,(0,c.jsx)(t.code,{children:`<body>`}),` tag`]}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// _document.tsx
+import { ServerStyleSheet } from '@preply/ds-web-core';
+import { SSRProvider } from '@preply/ds-web-root';
+
+// 1
+class MyDocument extends Document<Request & { classNames: string }> {
+    static async getInitialProps(ctx: DocumentContext}) {
+
+        // 2
+        const stylesheet = new ServerStyleSheet();
+
+        // 3
+        const originalRenderPage = ctx.renderPage
+        ctx.renderPage = () =>
+            originalRenderPage({
+                enhanceApp: (App) => props => (
+                    <SSRProvider stylesheet={stylesheet} hostname={hostname}>
+                        <App {...props} />
+                    </SSRProvider>
+                ),
+            });
+
+        // 4
+        const initialProps = await Document.getInitialProps(ctx);
+        return {
+            ...initialProps,
+            classNames : stylesheet.getClassName(),
+            styles: stylesheet.getStyleElement()
+        };
+    }
+
+    render() {
+        const { classNames } = this.props;
+        // 5
+        return (
+            <Html>
+                <body className={\`other-classes \${classNames}\`}>
+                    ...
+                </body>
+            </Html>
+        );
+    }
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`See also `,(0,c.jsx)(t.a,{href:`https://nextjs.org/docs/advanced-features/custom-document`,rel:`nofollow`,children:`Next.js official docs`}),`.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/11.fonts.explorer-CApH9AGF.js

@@ -0,0 +1,2 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r,s as i}from"./iframe-f34VuKy-.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-Bi0BC7jy.js";import{Default as s,n as c,t as l}from"./fonts-explorer.stories-I8-ZOqnR.js";function u(e){return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(r,{of:l}),`
+`,(0,f.jsx)(i,{of:s})]})}function d(e={}){let{wrapper:t}={...a(),...e.components};return t?(0,f.jsx)(t,{...e,children:(0,f.jsx)(u,{...e})}):u(e)}var f;e((()=>{f=t(),o(),n(),c()}))();export{d as default};

package/dist/assets/11.ssr.app-router-DusJ4Mbq.js

@@ -0,0 +1,59 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/SSR/Next.js app router`}),`
+`,(0,c.jsx)(t.h1,{id:`installation-nextjs-app-router`,children:`Installation: Next.js app router`}),`
+`,(0,c.jsxs)(t.p,{children:[`This guide assumes you have read and followed the steps in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation: Applications`}),` guide.`]}),`
+`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
+`,(0,c.jsxs)(t.p,{children:[`You will need to install one extra package. `,(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),`, which provides you with everything you need to collect stylesheets and CSS classes during SSR time.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add @preply/ds-web-core
+`})}),`
+`,(0,c.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`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.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>
+    );
+};
+`})}),`
+`,(0,c.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`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.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>
+    );
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`See also `,(0,c.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(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/20.libraries-AkYtGwIz.js

@@ -0,0 +1,22 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,strong:`strong`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Libraries`}),`
+`,(0,c.jsx)(t.h1,{id:`installation-libraries`,children:`Installation: Libraries`}),`
+`,(0,c.jsxs)(t.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 `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation: Applications`}),` guide.`]}),`
+`,(0,c.jsx)(t.h2,{id:`install-packages`,children:`Install Packages`}),`
+`,(0,c.jsxs)(t.p,{children:[`Since the `,(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` is already available in these applications, you need to install them as `,(0,c.jsx)(t.strong,{children:`peer dependencies`}),` in your library.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add --peer @preply/ds-web-lib
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Depending on what features of the Design System you want to use, you will need to install different libraries:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` - for components`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-core`}),` - for tokens`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),` - for hooks`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-root`}),` - for using RootProvider in "dev mode" isolated from host applications`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Make sure to install these packages as peer dependencies as addding them as direct dependencies will lead to duplicate instances of Design System singletons in the application builds which will cause incidents.`}),`
+`,(0,c.jsx)(t.p,{children:`Also make sure that your library build system is properly configured to effectively exclude peer dependencies from your bundle.`}),`
+`,(0,c.jsx)(t.h3,{id:`jest`,children:`Jest`}),`
+`,(0,c.jsxs)(t.p,{children:[`If you are using Jest for unit tests, you will need to add an ignore pattern to your library's `,(0,c.jsx)(t.code,{children:`jest.config.js`}),` to force transpilation of our modules before the tests are executed.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`transformIgnorePatterns: ['/node_modules/(?!(@preply)/)'],\`
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`storybook`,children:`Storybook`}),`
+`,(0,c.jsxs)(t.p,{children:[`If your library has a local instance of Storybook you will also have to follow the steps in `,(0,c.jsx)(t.a,{href:`/story/guides-installation-storybook--page`,children:`Installation: Storybook`}),`.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};