@preply/ds-docs 11.2.0 → 11.3.0

package/.storybook/main.ts

@@ -50,6 +50,7 @@ const config: StorybookConfig = {
         getAbsolutePath('@storybook/addon-vitest'),
         getAbsolutePath('@storybook/addon-docs'),
         getAbsolutePath('@chromatic-com/storybook'),
+        getAbsolutePath('storybook-addon-pseudo-states'),
     ],
     framework: {
         name: getAbsolutePath('@storybook/react-vite'),
@@ -61,9 +62,6 @@ const config: StorybookConfig = {
             shouldExtractLiteralValuesFromEnum: true,
             shouldExtractValuesFromUnion: true,
             shouldRemoveUndefinedFromOptional: true,
-            propFilter: {
-                skipPropsWithName: 'dsInternalSimulation',
-            },
             include: [join(resolve('../../packages/web-lib'), 'src/components/**/*.tsx')],
         },
     },

package/dist/assets/{00.LayoutFlex.stories-CZeeSnID.js → 00.LayoutFlex.stories-oDygdYoI.js}

@@ -1,4 +1,4 @@
-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-CEr_Bd5T.js";import{n as o,t as s}from"./LayoutFlexItem-DCUGpEDU.js";import{n as c,r as l,t as u}from"./storybook-utils-Dnw8-7zP.js";var d,f,p,m,h;t((()=>{e(n(),1),o(),i(),u(),d=r(),f={title:`components/LayoutFlex`,component:a,subcomponents:{LayoutFlexItem:s},argTypes:{gap:{description:l},padding:{description:c},direction:{description:l},justifyContent:{description:l},alignItems:{description:l},hide:{description:l},relative:{description:l}}},p=()=>(0,d.jsxs)(a,{gap:`16`,children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(s,{stretch:!0,children:(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`,textAlign:`center`},children:`stretch`})})]}),p.storyName=`LayoutFlex`,m={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:`16`,children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:50,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:75,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(s,{stretch:!0,children:(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:100,backgroundColor:`hotpink`,textAlign:`center`}})})]}),dataset:{qaid:`layout-flex`}},argTypes:{dataset:{control:`object`},nowrap:{control:`boolean`},hide:{control:`boolean`},relative:{control:`boolean`},inline:{control:`boolean`},direction:{control:`select`},children:{control:!1},column:{table:{disable:!0}},reverse:{table:{disable:!0}}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <LayoutFlex gap="16">
+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-CpktYRVX.js";import{n as o,t as s}from"./LayoutFlexItem-Dvv_cK8l.js";import{n as c,r as l,t as u}from"./storybook-utils-BfrlMSeG.js";var d,f,p,m,h;t((()=>{e(n(),1),o(),i(),u(),d=r(),f={title:`components/LayoutFlex`,component:a,subcomponents:{LayoutFlexItem:s},argTypes:{gap:{description:l},padding:{description:c},direction:{description:l},justifyContent:{description:l},alignItems:{description:l},hide:{description:l},relative:{description:l}}},p=()=>(0,d.jsxs)(a,{gap:`16`,children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(s,{stretch:!0,children:(0,d.jsx)(`div`,{style:{minWidth:`100px`,backgroundColor:`hotpink`,textAlign:`center`},children:`stretch`})})]}),p.storyName=`LayoutFlex`,m={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:`16`,children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:50,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:75,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(s,{stretch:!0,children:(0,d.jsx)(`div`,{style:{minWidth:`100px`,height:100,backgroundColor:`hotpink`,textAlign:`center`}})})]}),dataset:{qaid:`layout-flex`}},argTypes:{dataset:{control:`object`},nowrap:{control:`boolean`},hide:{control:`boolean`},relative:{control:`boolean`},inline:{control:`boolean`},direction:{control:`select`},children:{control:!1},column:{table:{disable:!0}},reverse:{table:{disable:!0}}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <LayoutFlex gap="16">
         <div style={{
     minWidth: '100px',
     backgroundColor: 'hotpink'

package/dist/assets/{00.applications-D-6PcdWy.js → 00.applications-CYsULPew.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,em:`em`,h1:`h1`,h2:`h2`,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/Applications`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,em:`em`,h1:`h1`,h2:`h2`,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/Applications`}),`
 `,(0,c.jsx)(t.h1,{id:`installation-applications`,children:`Installation: Applications`}),`
 `,(0,c.jsx)(t.p,{children:`This guide applies to both client-side and server-side rendered React applications.`}),`
 `,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`

package/dist/assets/{00.favicons.guide-BOqZ5Z1x.js → 00.favicons.guide-CH6Gi2mg.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Assets/Favicons`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,p:`p`,pre:`pre`,strong:`strong`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Assets/Favicons`}),`
 `,(0,c.jsx)(t.h1,{id:`favicons`,children:`Favicons`}),`
 `,(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, as well as Android and iOS devices.`]}),`
 `,(0,c.jsxs)(t.p,{children:[`Refer to `,(0,c.jsx)(t.a,{href:`https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs`,rel:`nofollow`,children:`How to Favicon in 2022: Six files that fit most needs`}),` for a detailed breakdown of the formats.`]}),`

package/dist/assets/{00.token-explorer-Bk0wBfni.js → 00.token-explorer-C_Go53CA.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{R as r,V as i,a as ee,h as te,i as a,m as o,n as s,nt as c,o as ne,r as l,rt as u,t as d,u as re,w as f}from"./dist-DtfJeYQK.js";import{t as p}from"./jsx-runtime-C2wGStra.js";import{c as ie,h as ae,l as oe,m as se,o as ce}from"./iframe-Ddp8AsMq.js";import{r as le}from"./react-B8jdHdWa.js";import{t as ue}from"./mdx-react-shim-BUTq3l7l.js";import{a as m,b as de,n as h,o as g,t as _}from"./dist-Czl5bXKQ.js";import{r as v,t as y}from"./styled-components.browser.esm-qDVQO-j_.js";var fe,b,pe,me,he=t((()=>{f(),u(),fe=(e,t)=>({token:t,name:e,id:t[1],type:t[0],colorSchemeAware:!!t[2]}),b=(e,t)=>Object.entries(t).flatMap(([t,n])=>{let i=`${e}.${t}`;return r(n)?[fe(i,n)]:b(i,n)}),pe=e=>Object.entries(e).flatMap(([e,t])=>b(e,t)),me=pe(c)})),ge,_e=t((()=>{ge=(e,t,n)=>e.filter(e=>{if(t===`-`||t===`--`)return!0;if(t?.startsWith(`--`))return e.id.toLowerCase().startsWith(t.substring(2).toLowerCase());if(t){let r=e.name.toLowerCase().indexOf(t.toLowerCase())>-1,i=e.value.toLowerCase().indexOf(t.toLowerCase())>-1;return(r||i)&&(n?e.colorSchemeAware:!e.colorSchemeAware)}return n?e.colorSchemeAware:!e.colorSchemeAware})}));function ve(e,t){return me.map(n=>({...n,value:`${l(e,t,n.token)}`}))}var x,S,C,ye,be,xe=t((()=>{d(),a(),x=e(n()),he(),_e(),S=p(),C=(0,x.createContext)({terms:``,colorScheme:void 0,results:[],setColorScheme:()=>void 0,setSearchTerms:()=>void 0}),ye=window?.localStorage?.getItem(`storybook.ds-color-scheme`)||void 0,be=({children:e})=>{let{findColorScheme:t}=te(),{theme:n}=ee(),[r,i]=(0,x.useState)(ye),[a,s]=(0,x.useState)(``),[c,ne]=(0,x.useState)([]),l=(0,x.useCallback)(e=>i(e),[i]),u=(0,x.useCallback)(e=>s(e),[s]);if(!n)throw Error(`useToken() must be used within a ThemeProvider`);return(0,x.useEffect)(()=>{ne(ge(ve(n,t(r||`base`)),a,!!r))},[r,t,a,n]),(0,S.jsx)(C.Provider,{value:{terms:a,results:c,colorScheme:r,setSearchTerms:u,setColorScheme:l},children:(0,S.jsx)(o,{colorScheme:r||`base`,children:e})})}})),Se,w,T=t((()=>{Se=e(n()),xe(),w=()=>(0,Se.useContext)(C)})),Ce,E,D,we=t((()=>{e(n()),v(),Ce=p(),E=y.div`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{R as r,V as i,a as ee,h as te,i as a,m as o,n as s,nt as c,o as ne,r as l,rt as u,t as d,u as re,w as f}from"./dist-DtfJeYQK.js";import{t as p}from"./jsx-runtime-C2wGStra.js";import{c as ie,h as ae,l as oe,m as se,o as ce}from"./iframe-kBDSpxRI.js";import{r as le}from"./react-B8jdHdWa.js";import{t as ue}from"./mdx-react-shim-BUTq3l7l.js";import{a as m,b as de,n as h,o as g,t as _}from"./dist-nghRgjCb.js";import{r as v,t as y}from"./styled-components.browser.esm-C-pLV-H4.js";var fe,b,pe,me,he=t((()=>{f(),u(),fe=(e,t)=>({token:t,name:e,id:t[1],type:t[0],colorSchemeAware:!!t[2]}),b=(e,t)=>Object.entries(t).flatMap(([t,n])=>{let i=`${e}.${t}`;return r(n)?[fe(i,n)]:b(i,n)}),pe=e=>Object.entries(e).flatMap(([e,t])=>b(e,t)),me=pe(c)})),ge,_e=t((()=>{ge=(e,t,n)=>e.filter(e=>{if(t===`-`||t===`--`)return!0;if(t?.startsWith(`--`))return e.id.toLowerCase().startsWith(t.substring(2).toLowerCase());if(t){let r=e.name.toLowerCase().indexOf(t.toLowerCase())>-1,i=e.value.toLowerCase().indexOf(t.toLowerCase())>-1;return(r||i)&&(n?e.colorSchemeAware:!e.colorSchemeAware)}return n?e.colorSchemeAware:!e.colorSchemeAware})}));function ve(e,t){return me.map(n=>({...n,value:`${l(e,t,n.token)}`}))}var x,S,C,ye,be,xe=t((()=>{d(),a(),x=e(n()),he(),_e(),S=p(),C=(0,x.createContext)({terms:``,colorScheme:void 0,results:[],setColorScheme:()=>void 0,setSearchTerms:()=>void 0}),ye=window?.localStorage?.getItem(`storybook.ds-color-scheme`)||void 0,be=({children:e})=>{let{findColorScheme:t}=te(),{theme:n}=ee(),[r,i]=(0,x.useState)(ye),[a,s]=(0,x.useState)(``),[c,ne]=(0,x.useState)([]),l=(0,x.useCallback)(e=>i(e),[i]),u=(0,x.useCallback)(e=>s(e),[s]);if(!n)throw Error(`useToken() must be used within a ThemeProvider`);return(0,x.useEffect)(()=>{ne(ge(ve(n,t(r||`base`)),a,!!r))},[r,t,a,n]),(0,S.jsx)(C.Provider,{value:{terms:a,results:c,colorScheme:r,setSearchTerms:u,setColorScheme:l},children:(0,S.jsx)(o,{colorScheme:r||`base`,children:e})})}})),Se,w,T=t((()=>{Se=e(n()),xe(),w=()=>(0,Se.useContext)(C)})),Ce,E,D,we=t((()=>{e(n()),v(),Ce=p(),E=y.div`
     width: 64px;
     height: 64px;
     color: white;

package/dist/assets/{00.using-responsive-props-BsEiJlqE.js → 00.using-responsive-props-JIrga6ab.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{pt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{l as o,o as s}from"./iframe-Ddp8AsMq.js";import{r as c}from"./react-B8jdHdWa.js";import{t as l}from"./mdx-react-shim-BUTq3l7l.js";import{g as u,t as d}from"./dist-Czl5bXKQ.js";var f,p,m=t((()=>{i(),e(n()),f=a(),p=()=>(0,f.jsx)(`table`,{style:{fontSize:14},children:(0,f.jsx)(`tbody`,{children:Object.entries(r).map(([e,t])=>(0,f.jsxs)(`tr`,{children:[(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsx)(`code`,{children:e})}),(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsxs)(`code`,{children:[t,`px`]})})]},e))})})}));function h(e){let t={code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...c(),...e.components};return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(s,{title:`Guides/Responsive Props`}),`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{pt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{l as o,o as s}from"./iframe-kBDSpxRI.js";import{r as c}from"./react-B8jdHdWa.js";import{t as l}from"./mdx-react-shim-BUTq3l7l.js";import{g as u,t as d}from"./dist-nghRgjCb.js";var f,p,m=t((()=>{i(),e(n()),f=a(),p=()=>(0,f.jsx)(`table`,{style:{fontSize:14},children:(0,f.jsx)(`tbody`,{children:Object.entries(r).map(([e,t])=>(0,f.jsxs)(`tr`,{children:[(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsx)(`code`,{children:e})}),(0,f.jsx)(`td`,{style:{padding:`0px 40px 10px 20px`},children:(0,f.jsxs)(`code`,{children:[t,`px`]})})]},e))})})}));function h(e){let t={code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...c(),...e.components};return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(s,{title:`Guides/Responsive Props`}),`
 `,(0,_.jsx)(t.h1,{id:`responsive-props`,children:`Responsive Props`}),`
 `,(0,_.jsx)(t.p,{children:`Some component props optionally accept responsive values for different screen sizes
 based on the global breakpoints:`}),`

package/dist/assets/{01.semantic-tokens-DElwA412.js → 01.semantic-tokens-3BaDr39t.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{nt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{c as o,l as s,o as c}from"./iframe-Ddp8AsMq.js";import{r as l}from"./react-B8jdHdWa.js";import{t as u}from"./mdx-react-shim-BUTq3l7l.js";import{a as d,i as f,t as p,v as m,y as h}from"./dist-Czl5bXKQ.js";var g,_,v,y,b,x,S,C,w=t((()=>{i(),p(),e(n()),g=a(),_=({inverted:e,textToken:t})=>{let n=r.color.text[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsx)(`div`,{style:{color:`var(--${n[1]})`,maxWidth:`240px`,padding:`10px`,background:`var(--${e?r.color.background.primaryInverted[1]:r.color.background.primary[1]})`},children:(0,g.jsxs)(`code`,{children:[`color.text.`,t]})})]},t):null},_.defaultProps={inverted:!1},v=({inverted:e,bgToken:t})=>{let n=r.color.background[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsxs)(`div`,{style:{background:`var(--${r.color.background[t][1]})`,color:`var(--${e?r.color.text.inverted[1]:r.color.text.primary[1]})`,maxWidth:`240px`,padding:`10px`},children:[`Background token: `,(0,g.jsxs)(`code`,{children:[`color.background.`,t]})]})]},t):null},v.defaultProps={inverted:!1},y=({contentToken:e})=>{let t=r.color.border[e];return Array.isArray(t)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:e}),(0,g.jsx)(`br`,{}),(0,g.jsxs)(`div`,{style:{border:`1px solid var(--${t[1]})`,background:`transparent`,color:`var(--${t[1]})`,maxWidth:`240px`,height:`50px`,padding:`10px`},children:[`color.border.`,e]})]},e):null},y.defaultProps={},b=()=>(0,g.jsxs)(d,{gap:`16`,columns:2,children:[(0,g.jsx)(m,{children:`Token family: action.variant.primary.*`}),(0,g.jsx)(m,{variant:`secondary`,children:`Token family: action.variant.secondary.*`}),(0,g.jsx)(m,{variant:`tertiary`,children:`Token family: action.variant.tertiary.*`}),(0,g.jsx)(m,{variant:`ghost`,children:`Token family: action.variant.ghost.*`}),(0,g.jsx)(m,{variant:`critical`,children:`Token family: action.variant.critical.*`}),(0,g.jsx)(m,{variant:`onColor`,children:`Token family: action.variant.onColor.*`}),(0,g.jsx)(m,{variant:`inverted`,children:`Token family: action.variant.inverted.*`}),(0,g.jsx)(m,{disabled:!0,children:`Token family: action.variant.disabled.*`})]}),x=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(_,{textToken:`primary`}),(0,g.jsx)(_,{textToken:`secondary`}),(0,g.jsx)(_,{textToken:`tertiary`}),(0,g.jsx)(_,{textToken:`accentDark`}),(0,g.jsx)(_,{textToken:`placeholder`}),(0,g.jsx)(_,{textToken:`inverted`,inverted:!0}),(0,g.jsx)(_,{textToken:`positive`}),(0,g.jsx)(_,{textToken:`info`}),(0,g.jsx)(_,{textToken:`warning`}),(0,g.jsx)(_,{textToken:`critical`})]}),S=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(v,{bgToken:`primary`}),(0,g.jsx)(v,{bgToken:`secondary`}),(0,g.jsx)(v,{bgToken:`tertiary`}),(0,g.jsx)(v,{bgToken:`overlay`}),(0,g.jsx)(v,{bgToken:`disabled`}),(0,g.jsx)(v,{bgToken:`brand`}),(0,g.jsx)(v,{bgToken:`brandB2b`}),(0,g.jsx)(v,{bgToken:`accentLight`}),(0,g.jsx)(v,{bgToken:`accentDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`positiveLight`}),(0,g.jsx)(v,{bgToken:`positiveDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`infoLight`}),(0,g.jsx)(v,{bgToken:`infoDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`warningLight`}),(0,g.jsx)(v,{bgToken:`warningDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`criticalLight`}),(0,g.jsx)(v,{bgToken:`criticalDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`statusOnline`}),(0,g.jsx)(v,{bgToken:`statusOffline`}),(0,g.jsx)(v,{bgToken:`primaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`secondaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`tertiaryInverted`,inverted:!0})]}),C=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(y,{contentToken:`primary`}),(0,g.jsx)(y,{contentToken:`secondary`}),(0,g.jsx)(y,{contentToken:`secondary-opacity`}),(0,g.jsx)(y,{contentToken:`tertiary`}),(0,g.jsx)(y,{contentToken:`disabled`}),(0,g.jsx)(y,{contentToken:`brand`}),(0,g.jsx)(y,{contentToken:`critical`}),(0,g.jsx)(y,{contentToken:`focus`}),(0,g.jsx)(y,{contentToken:`positive`})]})}));function T(e){let t={h1:`h1`,h2:`h2`,p:`p`,...l(),...e.components};return(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(c,{title:`Guides/Semantic tokens examples`}),`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{nt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{c as o,l as s,o as c}from"./iframe-kBDSpxRI.js";import{r as l}from"./react-B8jdHdWa.js";import{t as u}from"./mdx-react-shim-BUTq3l7l.js";import{a as d,i as f,t as p,v as m,y as h}from"./dist-nghRgjCb.js";var g,_,v,y,b,x,S,C,w=t((()=>{i(),p(),e(n()),g=a(),_=({inverted:e,textToken:t})=>{let n=r.color.text[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsx)(`div`,{style:{color:`var(--${n[1]})`,maxWidth:`240px`,padding:`10px`,background:`var(--${e?r.color.background.primaryInverted[1]:r.color.background.primary[1]})`},children:(0,g.jsxs)(`code`,{children:[`color.text.`,t]})})]},t):null},_.defaultProps={inverted:!1},v=({inverted:e,bgToken:t})=>{let n=r.color.background[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsxs)(`div`,{style:{background:`var(--${r.color.background[t][1]})`,color:`var(--${e?r.color.text.inverted[1]:r.color.text.primary[1]})`,maxWidth:`240px`,padding:`10px`},children:[`Background token: `,(0,g.jsxs)(`code`,{children:[`color.background.`,t]})]})]},t):null},v.defaultProps={inverted:!1},y=({contentToken:e})=>{let t=r.color.border[e];return Array.isArray(t)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:e}),(0,g.jsx)(`br`,{}),(0,g.jsxs)(`div`,{style:{border:`1px solid var(--${t[1]})`,background:`transparent`,color:`var(--${t[1]})`,maxWidth:`240px`,height:`50px`,padding:`10px`},children:[`color.border.`,e]})]},e):null},y.defaultProps={},b=()=>(0,g.jsxs)(d,{gap:`16`,columns:2,children:[(0,g.jsx)(m,{children:`Token family: action.variant.primary.*`}),(0,g.jsx)(m,{variant:`secondary`,children:`Token family: action.variant.secondary.*`}),(0,g.jsx)(m,{variant:`tertiary`,children:`Token family: action.variant.tertiary.*`}),(0,g.jsx)(m,{variant:`ghost`,children:`Token family: action.variant.ghost.*`}),(0,g.jsx)(m,{variant:`critical`,children:`Token family: action.variant.critical.*`}),(0,g.jsx)(m,{variant:`onColor`,children:`Token family: action.variant.onColor.*`}),(0,g.jsx)(m,{variant:`inverted`,children:`Token family: action.variant.inverted.*`}),(0,g.jsx)(m,{disabled:!0,children:`Token family: action.variant.disabled.*`})]}),x=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(_,{textToken:`primary`}),(0,g.jsx)(_,{textToken:`secondary`}),(0,g.jsx)(_,{textToken:`tertiary`}),(0,g.jsx)(_,{textToken:`accentDark`}),(0,g.jsx)(_,{textToken:`placeholder`}),(0,g.jsx)(_,{textToken:`inverted`,inverted:!0}),(0,g.jsx)(_,{textToken:`positive`}),(0,g.jsx)(_,{textToken:`info`}),(0,g.jsx)(_,{textToken:`warning`}),(0,g.jsx)(_,{textToken:`critical`})]}),S=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(v,{bgToken:`primary`}),(0,g.jsx)(v,{bgToken:`secondary`}),(0,g.jsx)(v,{bgToken:`tertiary`}),(0,g.jsx)(v,{bgToken:`overlay`}),(0,g.jsx)(v,{bgToken:`disabled`}),(0,g.jsx)(v,{bgToken:`brand`}),(0,g.jsx)(v,{bgToken:`brandB2b`}),(0,g.jsx)(v,{bgToken:`accentLight`}),(0,g.jsx)(v,{bgToken:`accentDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`positiveLight`}),(0,g.jsx)(v,{bgToken:`positiveDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`infoLight`}),(0,g.jsx)(v,{bgToken:`infoDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`warningLight`}),(0,g.jsx)(v,{bgToken:`warningDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`criticalLight`}),(0,g.jsx)(v,{bgToken:`criticalDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`statusOnline`}),(0,g.jsx)(v,{bgToken:`statusOffline`}),(0,g.jsx)(v,{bgToken:`primaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`secondaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`tertiaryInverted`,inverted:!0})]}),C=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(y,{contentToken:`primary`}),(0,g.jsx)(y,{contentToken:`secondary`}),(0,g.jsx)(y,{contentToken:`secondary-opacity`}),(0,g.jsx)(y,{contentToken:`tertiary`}),(0,g.jsx)(y,{contentToken:`disabled`}),(0,g.jsx)(y,{contentToken:`brand`}),(0,g.jsx)(y,{contentToken:`critical`}),(0,g.jsx)(y,{contentToken:`focus`}),(0,g.jsx)(y,{contentToken:`positive`})]})}));function T(e){let t={h1:`h1`,h2:`h2`,p:`p`,...l(),...e.components};return(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(c,{title:`Guides/Semantic tokens examples`}),`
 `,(0,D.jsx)(t.h1,{id:`semantic-tokens-examples`,children:`Semantic tokens examples`}),`
 `,(0,D.jsx)(t.p,{children:`With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones.`}),`
 `,(0,D.jsx)(t.h2,{id:`text-tokens`,children:`Text tokens`}),`

package/dist/assets/{01.using-shorthand-props-Bg-Oi5_v.js → 01.using-shorthand-props-BXu4Nck4.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={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/Shorthand Props`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={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/Shorthand Props`}),`
 `,(0,c.jsx)(t.h1,{id:`shorthand-props`,children:`Shorthand Props`}),`
 `,(0,c.jsxs)(t.p,{children:[`Some components accept shorthand values for spacing properties like `,(0,c.jsx)(t.code,{children:`padding`}),` and `,(0,c.jsx)(t.code,{children:`margin`}),`. These props can be specified in several ways:`]}),`
 `,(0,c.jsx)(t.h2,{id:`single-value`,children:`Single Value`}),`

package/dist/assets/10.Combinations.stories-SaJOx9D-.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 ee,r as te,t as ne}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as i,t as a}from"./LayoutFlex-CpktYRVX.js";import{n as o,t as s}from"./LayoutFlexItem-Dvv_cK8l.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,N.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function M(e){return(0,N.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Ne(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing0`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing0`},gap:`0`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Pe(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing1`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing1`},gap:`1`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Fe(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing2`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing2`},gap:`2`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Ie(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing4`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing4`},gap:`4`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Le(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing8`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing8`},gap:`8`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Re(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing12`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing12`},gap:`12`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function ze(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing16`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing16`},gap:`16`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Be(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing20`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing20`},gap:`20`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Ve(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing24`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing24`},gap:`24`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function He(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing32`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing32`},gap:`32`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Ue(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing48`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing48`},gap:`48`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function We(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing64`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing64`},gap:`64`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Ge(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing96`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing96`},gap:`96`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Ke(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`Spacing160`}),(0,N.jsxs)(a,{dataset:{testid:`Spacing160`},gap:`160`,children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function qe(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`SpacingResponsive`}),(0,N.jsxs)(a,{dataset:{testid:`SpacingResponsive`},gap:{_:`4`,"narrow-l":`8`,"medium-s":`12`,"medium-l":`16`,"wide-s":`20`,"wide-l":`24`},children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}function Je(){return(0,N.jsxs)(N.Fragment,{children:[(0,N.jsx)(`span`,{children:`SpacingResponsiveInvertedOrder`}),(0,N.jsxs)(a,{dataset:{testid:`SpacingResponsiveInvertedOrder`},gap:{"wide-l":`24`,"wide-s":`20`,"medium-l":`16`,"medium-s":`12`,"narrow-l":`8`,_:`4`},children:[(0,N.jsx)(j,{children:`a`}),(0,N.jsx)(M,{children:`b`})]})]})}var N,Ye=t((()=>{e(n(),1),i(),N=r()}));function P(e){return(0,I.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function F(e){return(0,I.jsx)(`div`,{style:{background:`orange`},children:e.children})}function Xe(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing0`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing0`},padding:`0`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function Ze(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing1`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing1`},padding:`1`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function Qe(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing2`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing2`},padding:`2`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function $e(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing4`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing4`},padding:`4`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function et(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing8`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing8`},padding:`8`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function tt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing12`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing12`},padding:`12`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function nt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing16`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing16`},padding:`16`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function rt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing20`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing20`},padding:`20`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function it(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing24`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing24`},padding:`24`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function at(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing32`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing32`},padding:`32`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function ot(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing48`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing48`},padding:`48`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function st(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing64`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing64`},padding:`64`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function ct(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing96`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing96`},padding:`96`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function lt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`Spacing160`}),(0,I.jsxs)(a,{dataset:{testid:`Spacing160`},padding:`160`,children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function ut(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingResponsive`}),(0,I.jsxs)(a,{dataset:{testid:`SpacingResponsive`},padding:{_:`4`,"narrow-l":`8`,"medium-s":`12`,"medium-l":`16`,"wide-s":`20`,"wide-l":`24`},children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function dt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingResponsiveInvertedOrder`}),(0,I.jsxs)(a,{dataset:{testid:`SpacingResponsiveInvertedOrder`},padding:{"wide-l":`24`,"wide-s":`20`,"medium-l":`16`,"medium-s":`12`,"narrow-l":`8`,_:`4`},children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function ft(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingShorthand2`}),(0,I.jsxs)(a,{dataset:{testid:`SpacingShorthand2`},padding:[`12`,`24`],children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function pt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingShorthand3`}),(0,I.jsxs)(a,{dataset:{testid:`SpacingShorthand3`},padding:[`12`,`24`,`48`],children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function mt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingShorthand4`}),(0,I.jsxs)(a,{dataset:{testid:`SpacingShorthand4`},padding:[`12`,`24`,`48`,`64`],children:[(0,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function ht(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingShorthandResponsive`}),(0,I.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,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}function gt(){return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(`span`,{children:`SpacingMixResponsive`}),(0,I.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,I.jsx)(P,{children:`a`}),(0,I.jsx)(F,{children:`b`})]})]})}var I,_t=t((()=>{e(n(),1),i(),I=r()}));function L(e){return(0,z.jsx)(`div`,{style:{background:`yellow`,width:`20%`},children:e.children})}function R(e){return(0,z.jsx)(`div`,{style:{background:`orange`,width:`20%`},children:e.children})}function vt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineTrueUndefined`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineTrueUndefined`},hide:!0,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function yt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineTrueFalse`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineTrueFalse`},hide:!0,inline:!1,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function bt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineTrueTrue`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineTrueTrue`},hide:!0,inline:!0,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function xt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineFalseUndefined`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineFalseUndefined`},hide:!1,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function St(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineFalseFalse`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineFalseFalse`},hide:!1,inline:!1,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function Ct(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineFalseTrue`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineFalseTrue`},hide:!1,inline:!0,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function wt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineUndefinedUndefined`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineUndefinedUndefined`},children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function Tt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineUndefinedFalse`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineUndefinedFalse`},inline:!1,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function Et(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineUndefinedTrue`}),(0,z.jsxs)(a,{dataset:{testid:`HideInlineUndefinedTrue`},inline:!0,children:[(0,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}function Dt(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineResponsive`}),(0,z.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,z.jsx)(L,{children:`A responsive`}),(0,z.jsx)(R,{children:`B responsive`})]})]})}function Ot(){return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{children:`HideInlineResponsiveInvertedOrder`}),(0,z.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,z.jsx)(L,{children:`a`}),(0,z.jsx)(R,{children:`b`})]})]})}var z,kt=t((()=>{e(n(),1),i(),z=r()}));function B(e){return(0,H.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function V(e){return(0,H.jsx)(`div`,{style:{background:`orange`},children:e.children})}function At(){return(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)(`span`,{children:`RelativeTrue`}),(0,H.jsxs)(a,{dataset:{testid:`RelativeTrue`},relative:!0,children:[(0,H.jsx)(B,{children:`a`}),(0,H.jsx)(V,{children:`b`})]})]})}function jt(){return(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)(`span`,{children:`RelativeFalse`}),(0,H.jsxs)(a,{dataset:{testid:`RelativeFalse`},relative:!1,children:[(0,H.jsx)(B,{children:`a`}),(0,H.jsx)(V,{children:`b`})]})]})}function Mt(){return(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)(`span`,{children:`RelativeResponsive`}),(0,H.jsxs)(a,{dataset:{testid:`RelativeResponsive`},relative:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},children:[(0,H.jsx)(B,{children:`a`}),(0,H.jsx)(V,{children:`b`})]})]})}function Nt(){return(0,H.jsxs)(H.Fragment,{children:[(0,H.jsx)(`span`,{children:`RelativeResponsiveInvertedOrder`}),(0,H.jsxs)(a,{dataset:{testid:`RelativeResponsiveInvertedOrder`},relative:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},children:[(0,H.jsx)(B,{children:`a`}),(0,H.jsx)(V,{children:`b`})]})]})}var H,Pt=t((()=>{e(n(),1),i(),H=r()}));function U(e){return(0,K.jsx)(`div`,{style:{background:`yellow`},children:e.children})}function W(e){return(0,K.jsx)(`div`,{style:{background:`orange`},children:e.children})}function G(){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)(U,{children:`a`}),(0,K.jsx)(W,{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)(U,{children:`a`}),(0,K.jsx)(W,{children:`b`})]})})]})}var K,q,J,It=t((()=>{e(n(),1),te(),i(),K=r(),q=ee`
+    div[data-override='true'] {
+        display:grid;
+    }
+`,J=ne.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),o(),i(),d(),he(),Se(),D(),Me(),Ye(),_t(),kt(),Pt(),It(),Bt(),X=r(),Z={title:`components/LayoutFlex`,component:a,tags:[`!autodocs`],subcomponents:{LayoutFlexItem:s},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)(qe,{}),(0,X.jsx)(Je,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(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)(gt,{}),(0,X.jsx)(`br`,{}),(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)(Ot,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(At,{}),(0,X.jsx)(jt,{}),(0,X.jsx)(Mt,{}),(0,X.jsx)(Nt,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(`br`,{}),(0,X.jsx)(G,{}),(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-CHasKWis.js → 10.fonts.guide-DkOyZCNQ.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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.`]}),`

package/dist/assets/{10.ssr-DpNJW1W0.js → 10.ssr-D-0bM4ee.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`

package/dist/assets/{11.fonts.explorer-CTqkQ8Jk.js → 11.fonts.explorer-D6KIcb2q.js}

@@ -1,2 +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-Ddp8AsMq.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-BUTq3l7l.js";import{Default as s,n as c,t as l}from"./fonts-explorer.stories-qeCxz5m7.js";function u(e){return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(r,{of:l}),`
+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-kBDSpxRI.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-BUTq3l7l.js";import{Default as s,n as c,t as l}from"./fonts-explorer.stories-DpO5HxZ3.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-FQQ4sEjM.js → 11.ssr.app-router-DWtYqFlx.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`

package/dist/assets/{20.libraries-BTCk2DJX.js → 20.libraries-BlqbfWjy.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.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`}),`

package/dist/assets/{2025-q4-ds-cleanup-BRN8Tdfv.js → 2025-q4-ds-cleanup-BUrvo7oQ.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Ddp8AsMq.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Migrations/2025 Q4 DS cleanup`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-kBDSpxRI.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Migrations/2025 Q4 DS cleanup`}),`
 `,(0,c.jsx)(t.h1,{id:`migrations2025-q4---design-system-cleanup-initiative`,children:`Migrations/2025 Q4 - Design System cleanup initiative`}),`
 `,(0,c.jsxs)(t.ul,{children:[`
 `,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`#for-teams`,children:`For teams`}),`