@preply/ds-docs 10.0.0 → 11.1.0

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

@@ -1,128 +0,0 @@
-import{j as e}from"./iframe-DjYTJz7A.js";import{L as y}from"./LayoutFlexItem-DrxhQlf5.js";import{L as n}from"./LayoutFlex-p_p7LCCd.js";import{f as D,d as T}from"./styled-components.browser.esm-3T8u8x7l.js";import"./preload-helper-Dp1pzeXC.js";import"./align-self-D0ug8REo.js";import"./layout-relative-DQF7VcUK.js";import"./layout-relative.module-BM7yIsEb.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./emotion-unitless.esm-BZwEwAnk.js";function S(s){return e.jsx("div",{style:{background:"yellow",width:"100%"},children:s.children})}function b(s){return e.jsx("div",{style:{background:"orange",width:"100%"},children:s.children})}function U(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapUndefined"}),e.jsxs(n,{dataset:{testid:"NowrapUndefined"},children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function H(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapTrue"}),e.jsxs(n,{dataset:{testid:"NowrapTrue"},nowrap:!0,children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function O(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapFalse"}),e.jsxs(n,{dataset:{testid:"NowrapFalse"},nowrap:!1,children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function c(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function x(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function $(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueUndefined"},column:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function A(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueFalse"},column:!0,reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function J(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueTrue"},column:!0,reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function k(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseUndefined"},column:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function G(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseFalse"},column:!1,reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function _(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseTrue"},column:!1,reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function P(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedUndefined"},children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function E(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedFalse"},reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function N(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedTrue"},reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function p(s){return e.jsx("div",{style:{background:"yellow",width:"50%"},children:s.children})}function g(s){return e.jsx("div",{style:{background:"orange",width:"50%"},children:s.children})}function B(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionRow"}),e.jsxs(n,{dataset:{testid:"DirectionRow"},direction:"row",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function L(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionRowReverse"}),e.jsxs(n,{dataset:{testid:"DirectionRowReverse"},direction:"row-reverse",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function M(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumn"}),e.jsxs(n,{dataset:{testid:"DirectionColumn"},direction:"column",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function q(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverse"}),e.jsxs(n,{dataset:{testid:"DirectionColumnReverse"},direction:"column-reverse",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function z(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverseResponsive"}),e.jsxs(n,{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:[e.jsx(p,{children:"A"}),e.jsx(g,{children:"B"})]})]})}function K(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverseResponsiveInvertedOrder"}),e.jsxs(n,{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:[e.jsx(p,{children:"A"}),e.jsx(g,{children:"B"})]})]})}function j(s){return e.jsx("div",{style:{background:"yellow",width:"20%"},children:s.children})}function h(s){return e.jsx("div",{style:{background:"orange",width:"20%"},children:s.children})}function Q(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentCenter"}),e.jsxs(n,{dataset:{testid:"JustifyContentCenter"},justifyContent:"center",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function V(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentStart"}),e.jsxs(n,{dataset:{testid:"JustifyContentStart"},justifyContent:"start",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function W(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentEnd"}),e.jsxs(n,{dataset:{testid:"JustifyContentEnd"},justifyContent:"end",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function X(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceBetween"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceBetween"},justifyContent:"space-between",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function Y(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceAround"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceAround"},justifyContent:"space-around",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function Z(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceEvenly"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceEvenly"},justifyContent:"space-evenly",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function ee(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentResponsive"}),e.jsxs(n,{dataset:{testid:"JustifyContentResponsive"},justifyContent:{_:"center","narrow-l":"end","medium-s":"space-around","medium-l":"space-around","wide-s":"space-evenly","wide-l":"end"},children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function ne(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"JustifyContentResponsiveInvertedOrder"},justifyContent:{"wide-l":"end","wide-s":"space-evenly","medium-l":"space-around","medium-s":"space-around","narrow-l":"end",_:"center"},children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function u(s){return e.jsx("div",{style:{background:"yellow",height:"60px"},children:s.children})}function o(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function se(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsCenter"}),e.jsxs(n,{dataset:{testid:"AlignItemsCenter"},alignItems:"center",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function ie(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsStart"}),e.jsxs(n,{dataset:{testid:"AlignItemsStart"},alignItems:"start",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function re(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsEnd"}),e.jsxs(n,{dataset:{testid:"AlignItemsEnd"},alignItems:"end",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function de(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsStretch"}),e.jsxs(n,{dataset:{testid:"AlignItemsStretch"},alignItems:"stretch",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function te(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsBaseline"}),e.jsxs(n,{dataset:{testid:"AlignItemsBaseline"},alignItems:"baseline",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function ae(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsResponsive"}),e.jsxs(n,{dataset:{testid:"AlignItemsResponsive"},alignItems:{_:"center","narrow-l":"end","medium-s":"baseline","medium-l":"center","wide-s":"stretch","wide-l":"end"},children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function le(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"AlignItemsResponsiveInvertedOrder"},alignItems:{"wide-l":"end","wide-s":"stretch","medium-l":"center","medium-s":"baseline","narrow-l":"end",_:"center"},children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function d(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function t(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function ce(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing0"}),e.jsxs(n,{dataset:{testid:"Spacing0"},gap:"0",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function xe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing1"}),e.jsxs(n,{dataset:{testid:"Spacing1"},gap:"1",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function je(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing2"}),e.jsxs(n,{dataset:{testid:"Spacing2"},gap:"2",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function he(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing4"}),e.jsxs(n,{dataset:{testid:"Spacing4"},gap:"4",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ue(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing8"}),e.jsxs(n,{dataset:{testid:"Spacing8"},gap:"8",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function oe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing12"}),e.jsxs(n,{dataset:{testid:"Spacing12"},gap:"12",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function pe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing16"}),e.jsxs(n,{dataset:{testid:"Spacing16"},gap:"16",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ge(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing20"}),e.jsxs(n,{dataset:{testid:"Spacing20"},gap:"20",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function me(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing24"}),e.jsxs(n,{dataset:{testid:"Spacing24"},gap:"24",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ve(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing32"}),e.jsxs(n,{dataset:{testid:"Spacing32"},gap:"32",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function fe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing48"}),e.jsxs(n,{dataset:{testid:"Spacing48"},gap:"48",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Se(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing64"}),e.jsxs(n,{dataset:{testid:"Spacing64"},gap:"64",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function be(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing96"}),e.jsxs(n,{dataset:{testid:"Spacing96"},gap:"96",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Fe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing160"}),e.jsxs(n,{dataset:{testid:"Spacing160"},gap:"160",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Re(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingResponsive"},gap:{_:"4","narrow-l":"8","medium-s":"12","medium-l":"16","wide-s":"20","wide-l":"24"},children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function we(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"SpacingResponsiveInvertedOrder"},gap:{"wide-l":"24","wide-s":"20","medium-l":"16","medium-s":"12","narrow-l":"8",_:"4"},children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function i(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function r(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function Ce(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing0"}),e.jsxs(n,{dataset:{testid:"Spacing0"},padding:"0",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ie(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing1"}),e.jsxs(n,{dataset:{testid:"Spacing1"},padding:"1",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function ye(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing2"}),e.jsxs(n,{dataset:{testid:"Spacing2"},padding:"2",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function De(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing4"}),e.jsxs(n,{dataset:{testid:"Spacing4"},padding:"4",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Te(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing8"}),e.jsxs(n,{dataset:{testid:"Spacing8"},padding:"8",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ue(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing12"}),e.jsxs(n,{dataset:{testid:"Spacing12"},padding:"12",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function He(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing16"}),e.jsxs(n,{dataset:{testid:"Spacing16"},padding:"16",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Oe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing20"}),e.jsxs(n,{dataset:{testid:"Spacing20"},padding:"20",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function $e(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing24"}),e.jsxs(n,{dataset:{testid:"Spacing24"},padding:"24",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ae(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing32"}),e.jsxs(n,{dataset:{testid:"Spacing32"},padding:"32",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Je(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing48"}),e.jsxs(n,{dataset:{testid:"Spacing48"},padding:"48",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function ke(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing64"}),e.jsxs(n,{dataset:{testid:"Spacing64"},padding:"64",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ge(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing96"}),e.jsxs(n,{dataset:{testid:"Spacing96"},padding:"96",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function _e(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing160"}),e.jsxs(n,{dataset:{testid:"Spacing160"},padding:"160",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Pe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingResponsive"},padding:{_:"4","narrow-l":"8","medium-s":"12","medium-l":"16","wide-s":"20","wide-l":"24"},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ee(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"SpacingResponsiveInvertedOrder"},padding:{"wide-l":"24","wide-s":"20","medium-l":"16","medium-s":"12","narrow-l":"8",_:"4"},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ne(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand2"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand2"},padding:["12","24"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Be(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand3"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand3"},padding:["12","24","48"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Le(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand4"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand4"},padding:["12","24","48","64"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Me(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthandResponsive"}),e.jsxs(n,{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:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function qe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingMixResponsive"}),e.jsxs(n,{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:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function a(s){return e.jsx("div",{style:{background:"yellow",width:"20%"},children:s.children})}function l(s){return e.jsx("div",{style:{background:"orange",width:"20%"},children:s.children})}function ze(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueUndefined"},hide:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Ke(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueFalse"},hide:!0,inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Qe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueTrue"},hide:!0,inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Ve(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseUndefined"},hide:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function We(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseFalse"},hide:!1,inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Xe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseTrue"},hide:!1,inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Ye(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedUndefined"},children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function Ze(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedFalse"},inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function en(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedTrue"},inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function nn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineResponsive"}),e.jsxs(n,{dataset:{testid:"HideInlineResponsive"},hide:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},inline:!0,children:[e.jsx(a,{children:"A responsive"}),e.jsx(l,{children:"B responsive"})]})]})}function sn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"HideInlineResponsiveInvertedOrder"},hide:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function v(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function f(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function rn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeTrue"}),e.jsxs(n,{dataset:{testid:"RelativeTrue"},relative:!0,children:[e.jsx(v,{children:"a"}),e.jsx(f,{children:"b"})]})]})}function dn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeFalse"}),e.jsxs(n,{dataset:{testid:"RelativeFalse"},relative:!1,children:[e.jsx(v,{children:"a"}),e.jsx(f,{children:"b"})]})]})}function tn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeResponsive"}),e.jsxs(n,{dataset:{testid:"RelativeResponsive"},relative:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},children:[e.jsx(v,{children:"a"}),e.jsx(f,{children:"b"})]})]})}function an(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"RelativeResponsiveInvertedOrder"},relative:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},children:[e.jsx(v,{children:"a"}),e.jsx(f,{children:"b"})]})]})}function C(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function I(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}const ln=D`
-    div[data-override='true'] {
-        display:grid;
-    }
-`;function cn(){return e.jsxs(e.Fragment,{children:[e.jsx(ln,{}),e.jsx("span",{children:"DataOverrideGlobalClass"}),e.jsxs(n,{dataset:{testid:"DataOverrideGlobalClass",override:!0},children:[e.jsx(C,{children:"a"}),e.jsx(I,{children:"b"})]})]})}const xn=T.div`
-    div[data-override='true'] {
-        display: grid;
-    }
-`;function jn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DataOverrideLocalClass"}),e.jsx(xn,{children:e.jsxs(n,{dataset:{testid:"DataOverrideLocalClass",override:!0},children:[e.jsx(C,{children:"a"}),e.jsx(I,{children:"b"})]})})]})}function hn(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function un(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function on(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Default"}),e.jsxs(n,{dataset:{testid:"Default"},children:[e.jsx(hn,{children:"a"}),e.jsx(un,{children:"b"})]})]})}const yn={title:"components/LayoutFlex",component:n,tags:["!autodocs"],subcomponents:{LayoutFlexItem:y},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"}}}}},m=()=>e.jsxs(e.Fragment,{children:[e.jsx(on,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(U,{}),e.jsx(H,{}),e.jsx(O,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx($,{}),e.jsx(A,{}),e.jsx(J,{}),e.jsx(k,{}),e.jsx(G,{}),e.jsx(_,{}),e.jsx(P,{}),e.jsx(E,{}),e.jsx(N,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(B,{}),e.jsx(L,{}),e.jsx(M,{}),e.jsx(q,{}),e.jsx(z,{}),e.jsx(K,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(Q,{}),e.jsx(V,{}),e.jsx(W,{}),e.jsx(X,{}),e.jsx(Y,{}),e.jsx(Z,{}),e.jsx(ee,{}),e.jsx(ne,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(se,{}),e.jsx(ie,{}),e.jsx(re,{}),e.jsx(de,{}),e.jsx(te,{}),e.jsx(ae,{}),e.jsx(le,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(ce,{}),e.jsx(xe,{}),e.jsx(je,{}),e.jsx(he,{}),e.jsx(ue,{}),e.jsx(oe,{}),e.jsx(pe,{}),e.jsx(ge,{}),e.jsx(me,{}),e.jsx(ve,{}),e.jsx(fe,{}),e.jsx(Se,{}),e.jsx(be,{}),e.jsx(Fe,{}),e.jsx(Re,{}),e.jsx(we,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(Ce,{}),e.jsx(Ie,{}),e.jsx(ye,{}),e.jsx(De,{}),e.jsx(Te,{}),e.jsx(Ue,{}),e.jsx(He,{}),e.jsx(Oe,{}),e.jsx($e,{}),e.jsx(Ae,{}),e.jsx(Je,{}),e.jsx(ke,{}),e.jsx(Ge,{}),e.jsx(_e,{}),e.jsx(Pe,{}),e.jsx(Ee,{}),e.jsx(Ne,{}),e.jsx(Be,{}),e.jsx(Le,{}),e.jsx(Me,{}),e.jsx(qe,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(ze,{}),e.jsx("br",{}),e.jsx(Ke,{}),e.jsx("br",{}),e.jsx(Qe,{}),e.jsx("br",{}),e.jsx(Ve,{}),e.jsx("br",{}),e.jsx(We,{}),e.jsx("br",{}),e.jsx(Xe,{}),e.jsx("br",{}),e.jsx(Ye,{}),e.jsx("br",{}),e.jsx(Ze,{}),e.jsx("br",{}),e.jsx(en,{}),e.jsx("br",{}),e.jsx(nn,{}),e.jsx("br",{}),e.jsx(sn,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(rn,{}),e.jsx(dn,{}),e.jsx(tn,{}),e.jsx(an,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(cn,{}),e.jsx(jn,{})]});var F,R,w;m.parameters={...m.parameters,docs:{...(F=m.parameters)==null?void 0:F.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 />
-    </>`,...(w=(R=m.parameters)==null?void 0:R.docs)==null?void 0:w.source}}};const Dn=["Combinations"];export{m as Combinations,Dn as __namedExportsOrder,yn as default};

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

@@ -1,39 +0,0 @@
-import{j as e,M as o}from"./iframe-DjYTJz7A.js";import{useMDXComponents as l}from"./index-cpi3YaXo.js";import"./preload-helper-Dp1pzeXC.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...l(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{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."]}),`
-`,e.jsx(n.p,{children:"You should only follow these instructions if Preply Design System is NOT installed (and can not be installed), in the application."}),`
-`,e.jsxs(n.p,{children:["In all other cases follow the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation Guides"}),"."]}),`
-`,e.jsx(n.h2,{id:"tokyo-ui-rebrand-fonts",children:"Tokyo UI (reBrand) fonts"}),`
-`,e.jsxs(n.p,{children:["The Tokyo UI fonts are applied only for descendants of elements with the ",e.jsx(n.code,{children:'data-preply-brand="tokyo"'})," attribute."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<div data-preply-ds-theme="tokyo-ui">
-    <!-- All the children use the new fonts -->
-</div>
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.a,{href:"https://preply.atlassian.net/browse/DES-1108",rel:"nofollow",children:"DES-1108"})," will fix this."]}),`
-`,e.jsx(n.h2,{id:"using-the-assets",children:"Using the assets"}),`
-`,e.jsxs(n.p,{children:["First, in the ",e.jsx(n.code,{children:"index.html"})," file, as close as possible to the start of the ",e.jsx(n.code,{children:"<head>"})," tag, add:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.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" />
-`})}),`
-`,e.jsxs(n.p,{children:["This will make ",e.jsx(n.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 ",e.jsx(n.code,{children:"PreplyInter"})," typeface."]}),`
-`,e.jsx(n.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."}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-css",children:`* {
-    font-family: 'PreplyInter', sans-serif;
-}
-
-@supports (font-variation-settings: normal) {
-    * {
-        font-family: 'PreplyInterV', sans-serif;
-    }
-}
-`})})]})}function d(s={}){const{wrapper:n}={...l(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{d as default};

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

@@ -1,91 +0,0 @@
-import{j as e,M as o}from"./iframe-DjYTJz7A.js";import{useMDXComponents as r}from"./index-cpi3YaXo.js";import"./preload-helper-Dp1pzeXC.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."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`yarn add @preply/ds-web-core
-`})}),`
-`,e.jsxs(n.h2,{id:"instruct-rootprovider-to-not-render-any-css-classes",children:["Instruct ",e.jsx(n.code,{children:"RootProvider"})," to NOT render any CSS classes"]}),`
-`,e.jsxs(n.p,{children:["In the case of SSR, ",e.jsx(n.code,{children:"document.body"})," is not available during SSR, so you will need to provide ",e.jsx(n.code,{children:'target="none"'})," instead."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.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>
-        ...
-    );
-};
-`})}),`
-`,e.jsx(n.h2,{id:"add-the-global-styles",children:"Add the global styles"}),`
-`,e.jsxs(n.p,{children:["In the component that renders your application's HTML document, as close as possible to the start of the ",e.jsx(n.code,{children:"<head>"})," tag, add:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { GlobalStyle } from '@preply/ds-web-root';
-
-...
-    return (
-        <html>
-            <head>
-                <link rel="preconnect" href="https://static.preply.com" />
-                <GlobalStyle />
-                ...
-`})}),`
-`,e.jsx(n.h2,{id:"setup-ssrprovider---ds-context-for-ssr-time",children:"Setup SSRProvider - DS context for SSR time"}),`
-`,e.jsxs(n.p,{children:["Wrap your SSR application with ",e.jsx(n.code,{children:"SSRProvider"})," in order to provide a ",e.jsx(n.code,{children:"hostname"}),' context and collect the "critical" CSS class names and style blocks.']}),`
-`,e.jsxs(n.p,{children:["For more information on this provider visit ",e.jsx(n.a,{href:"/story/api-ds-web-root-providers-ssrprovider--page",children:"API / ds-web-root / providers / SSRProvider"})," reference page."]}),`
-`,e.jsxs(n.p,{children:["The following code is taken from a ",e.jsx(n.code,{children:"Next.js"})," application."]}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["merge ",e.jsx(n.code,{children:"{ classNames: string }"})," with the ",e.jsx(n.code,{children:"Document"})," props"]}),`
-`,e.jsxs(n.li,{children:["create an instance of this class to collect CSS class names and ",e.jsx(n.code,{children:"<style>"})," blocks"]}),`
-`,e.jsxs(n.li,{children:["wrap SSR rendering with the ",e.jsx(n.code,{children:"SSRProvider"})]}),`
-`,e.jsxs(n.li,{children:["expose CSS class names and the ",e.jsx(n.code,{children:"<style>"})," element"]}),`
-`,e.jsxs(n.li,{children:["and render the CSS classes in the ",e.jsx(n.code,{children:"<body>"})," tag"]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.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>
-        );
-    }
-}
-`})}),`
-`,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 c(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{c as default};

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

@@ -1,2 +0,0 @@
-import{j as t,M as i,S as p}from"./iframe-DjYTJz7A.js";import{useMDXComponents as n}from"./index-cpi3YaXo.js";import{F as e,D as s}from"./fonts-explorer.stories-Bp_9af2z.js";import"./preload-helper-Dp1pzeXC.js";import"./index-CUvrBGJo.js";import"./componentNames-hc9KR2nX.js";import"./message-DiUVdAQd.js";import"./styled-components.browser.esm-DegKtid9.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./TokyoUIExerciseClosedGapsJumble-OGZLJcQZ.js";import"./text-centered-CqZrbSb_.js";import"./render-icon-DlE4AZJV.js";import"./ButtonBase-CPJxprWJ.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./Text-FXv4P3JX.js";import"./getTokenVar-B8jDl0Ui.js";import"./tokens-Cp4gIGSO.js";import"./TokyoUIChevronRight-UHMBQAxX.js";import"./TokyoUICheck-Cg3ZJnmD.js";import"./breakpoints-BfMlrtxE.js";function m(o){return t.jsxs(t.Fragment,{children:[t.jsx(i,{of:e}),`
-`,t.jsx(p,{of:s})]})}function b(o={}){const{wrapper:r}={...n(),...o.components};return r?t.jsx(r,{...o,children:t.jsx(m,{...o})}):m()}export{b as default};

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

@@ -1,59 +0,0 @@
-import{j as e,M as s}from"./iframe-DjYTJz7A.js";import{useMDXComponents as n}from"./index-cpi3YaXo.js";import"./preload-helper-Dp1pzeXC.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 d(r={}){const{wrapper:t}={...n(),...r.components};return t?e.jsx(t,{...r,children:e.jsx(o,{...r})}):o(r)}export{d as default};

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

@@ -1,21 +0,0 @@
-import{j as e,M as r}from"./iframe-DjYTJz7A.js";import{useMDXComponents as o}from"./index-cpi3YaXo.js";import"./preload-helper-Dp1pzeXC.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"}),`
-`,e.jsxs(n.p,{children:["Since the ",e.jsx(n.code,{children:"@preply/ds-web-lib"})," is already available in these applications, you need to install them as ",e.jsx(n.strong,{children:"peer dependencies"})," in your library."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`yarn add --peer @preply/ds-web-lib
-`})}),`
-`,e.jsx(n.p,{children:"Depending on what features of the Design System you want to use, you will need to install different libraries:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"@preply/ds-web-lib"})," - for components"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"@preply/ds-core"})," - for tokens"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"@preply/ds-web-core"})," - for hooks"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"@preply/ds-web-root"}),' - for using RootProvider in "dev mode" isolated from host applications']}),`
-`]}),`
-`,e.jsx(n.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."}),`
-`,e.jsx(n.p,{children:"Also make sure that your library build system is properly configured to effectively exclude peer dependencies from your bundle."}),`
-`,e.jsx(n.h3,{id:"jest",children:"Jest"}),`
-`,e.jsxs(n.p,{children:["If you are using Jest for unit tests, you will need to add an ignore pattern to your library's ",e.jsx(n.code,{children:"jest.config.js"})," to force transpilation of our modules before the tests are executed."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:"transformIgnorePatterns: ['/node_modules/(?!(@preply)/)'],`\n"})}),`
-`,e.jsx(n.h3,{id:"storybook",children:"Storybook"}),`
-`,e.jsxs(n.p,{children:["If your library has a local instance of Storybook you will also have to follow the steps in ",e.jsx(n.a,{href:"/story/guides-installation-storybook--page",children:"Installation: Storybook"}),"."]})]})}function d(s={}){const{wrapper:n}={...o(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(i,{...s})}):i(s)}export{d as default};