@preply/ds-docs 10.0.0 → 11.1.0

package/.storybook/decorators/withIntlProvider.tsx

@@ -31,7 +31,7 @@ export const intlGlobals = {
         name: 'Locale',
         defaultValue: 'en',
         toolbar: {
-            icon: 'globe',
+            icon: 'globe' as const,
             items: [
                 { value: 'en', title: 'English', right: '🇺🇸' },
                 { value: 'es', title: 'Spanish', right: '🇪🇸' },

package/.storybook/main.ts

@@ -49,6 +49,7 @@ const config: StorybookConfig = {
         getAbsolutePath('@storybook/addon-links'),
         getAbsolutePath('@storybook/addon-vitest'),
         getAbsolutePath('@storybook/addon-docs'),
+        getAbsolutePath('@chromatic-com/storybook'),
     ],
     framework: {
         name: getAbsolutePath('@storybook/react-vite'),

package/.storybook/preview.tsx

@@ -6,6 +6,7 @@ import { RootProvider } from '@preply/ds-web-root';
 import { DocsContainer as StorybookDocsContainer } from '@storybook/addon-docs/blocks';
 import { IntlProvider } from 'react-intl';
 import React from 'react';
+import { resetAllMocks } from 'storybook/test';
 
 import '@preply/ds-static-assets/src/global.css';
 
@@ -134,6 +135,10 @@ const preview: Preview = {
             value: 'white',
         },
     },
+
+    async beforeEach() {
+        resetAllMocks();
+    },
 };
 
 export default preview;

package/chromatic.config.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "https://www.chromatic.com/config-file.schema.json",
+    "projectId": "Project:66bc9ba13609e300fe53e5f8",
+    "buildScriptName": "build",
+    "autoAcceptChanges": false,
+    "onlyChanged": true,
+    "exitZeroOnChanges": false,
+    "storybookBaseDir": "support/docs",
+    "zip": true
+}

package/dist/assets/00.LayoutFlex.stories-pFo1xsBe.js

@@ -0,0 +1,85 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./LayoutFlex-DdWp4cl3.js";import{n as o,t as s}from"./LayoutFlexItem-DE78Bh3c.js";import{n as c,r as l,t as u}from"./storybook-utils-CXrHOWy7.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'
+  }}> </div>
+        <div style={{
+    minWidth: '100px',
+    backgroundColor: 'hotpink'
+  }}> </div>
+        <LayoutFlexItem stretch>
+            <div style={{
+      minWidth: '100px',
+      backgroundColor: 'hotpink',
+      textAlign: 'center'
+    }}>
+                stretch
+            </div>
+        </LayoutFlexItem>
+    </LayoutFlex>`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    gap: '16',
+    children: <>
+                <div style={{
+        minWidth: '100px',
+        height: 50,
+        backgroundColor: 'hotpink'
+      }}> </div>
+                <div style={{
+        minWidth: '100px',
+        height: 75,
+        backgroundColor: 'hotpink'
+      }}> </div>
+                <LayoutFlexItem stretch>
+                    <div style={{
+          minWidth: '100px',
+          height: 100,
+          backgroundColor: 'hotpink',
+          textAlign: 'center'
+        }}></div>
+                </LayoutFlexItem>
+            </>,
+    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: false
+    },
+    // Disable deprecated props
+    column: {
+      table: {
+        disable: true
+      }
+    },
+    reverse: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}},h=[`Base`,`Playground`]}))();export{p as Base,m as Playground,h as __namedExportsOrder,f as default};

package/dist/assets/00.applications-Cqkdr1wk.js

@@ -0,0 +1,50 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,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`}),`
+`,(0,c.jsxs)(t.p,{children:[`Our packages are available in the `,(0,c.jsx)(t.a,{href:`https://www.npmjs.com/search?q=%40preply`,rel:`nofollow`,children:`npm`}),` registry under the `,(0,c.jsx)(t.code,{children:`@preply`}),` namespace.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add @preply/ds-web-lib @preply/ds-web-root
+`})}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-root`}),` provides a single entry point to instantiate all the necessary resources in your application.`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` provides the collection of components documented for the web platform.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`add-the-global-styles`,children:`Add the global styles`}),`
+`,(0,c.jsxs)(t.p,{children:[`In the `,(0,c.jsx)(t.code,{children:`index.html`}),` file, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<!-- Preply DS Global Style https://ds.preply.org/latest/?path=/story/guides-installation-applications--page -->
+<link rel="preconnect" href="https://static.preply.com" />
+<link rel="preload" href="https://static.preply.com/ds/global.css" as="style" />
+<link
+    rel="preload"
+    href="https://static.preply.com/ds/fonts/en/PreplyInter.var.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin
+/>
+<link rel="stylesheet" href="https://static.preply.com/ds/global.css" />
+`})}),`
+`,(0,c.jsx)(t.p,{children:`This CSS resource contains:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`@font-face`}),` declarations for loading `,(0,c.jsx)(t.code,{children:`PreplyInter`}),`. See `,(0,c.jsx)(t.a,{href:`/story/guides-assets-fonts--page`,children:`Guides / Assets / Fonts`})]}),`
+`,(0,c.jsxs)(t.li,{children:[`global `,(0,c.jsx)(t.code,{children:`font-family`}),` declarations`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:(0,c.jsx)(t.strong,{children:`Notes:`})}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`In the future, this global stylesheet will also contain generic reset rules.`}),`
+`,(0,c.jsxs)(t.li,{children:[`If your app is rendered server side with dynamic `,(0,c.jsx)(t.code,{children:`<head>`}),` content, follow the instructions in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-ssr--page`,children:`Installation: SSR`}),` guide instead.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.h2,{id:`add-rootprovider`,children:[`Add `,(0,c.jsx)(t.code,{children:`RootProvider`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`<RootProvider/>`}),` wraps all the other providers and makes sure the CSS classes are added to your DOM. You will need to wrap your code with it.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`The `,(0,c.jsx)(t.code,{children:`target`}),` prop determines where to inject the CSS classes and you can provide the DOM element `,(0,c.jsx)(t.code,{children:`document.body`}),` in order to have the CSS classes in scope for components rendered anywhere in the page, including `,(0,c.jsx)(t.em,{children:`portals`}),` outside of `,(0,c.jsx)(t.code,{children:`<div id="root">`}),`.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { RootProvider } from '@preply/ds-web-root';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <RootProvider target={document.body} theme="tokyo-ui">
+            <App />
+        </RootProvider>
+    </React.StrictMode>,
+    document.getElementById('root'),
+);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.strong,{children:`Note:`}),` If your app is rendered server side, continue with the instructions in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-ssr--page`,children:`Installation: SSR`}),` guide.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/00.favicons.guide-B91Vhoka.js

@@ -0,0 +1,21 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,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.`]}),`
+`,(0,c.jsx)(t.h2,{id:`variants`,children:`Variants`}),`
+`,(0,c.jsxs)(t.p,{children:[`Pick the approriate snippet and add it to the `,(0,c.jsx)(t.code,{children:`<head>`}),` section of your application.`]}),`
+`,(0,c.jsx)(t.h3,{id:`preply-logo`,children:`Preply logo`}),`
+`,(0,c.jsx)(`img`,{src:`https://static.preply.com/ds/icons/favicon.svg`,alt:`Preply logo icon`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<!-- Preply Favicons /story/guides-assets-favicons--page -->
+<link rel="icon" href="https://static.preply.com/ds/icons/rebrand-23-v0/favicon.ico" sizes="any" />
+<link
+    rel="icon"
+    href="https://static.preply.com/ds/icons/rebrand-23-v0/favicon.svg"
+    type="image/svg+xml"
+/>
+<link
+    rel="apple-touch-icon"
+    href="https://static.preply.com/ds/icons/rebrand-23-v0/icon-180.pngg"
+/>
+<link rel="manifest" href="https://static.preply.com/ds/icons/rebrand-23-v0/web.manifest.json" />
+`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/00.token-explorer-B19aUGGg.js

@@ -0,0 +1,340 @@
+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-f34VuKy-.js";import{r as le}from"./react-B8jdHdWa.js";import{t as ue}from"./mdx-react-shim-Bi0BC7jy.js";import{a as m,b as de,n as h,o as g,t as _}from"./dist-XW9XCd1i.js";import{r as v,t as y}from"./styled-components.browser.esm-ByE8r-7j.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;
+    background-color: ${({value:e})=>e};
+`,D=({value:e})=>(0,Ce.jsx)(E,{value:e})})),O,k,A,Te=t((()=>{e(n()),v(),O=p(),k=y.div`
+    background: white;
+    width: 48px;
+    height: 48px
+    padding: 8px 0 0 8px;
+    background: ${({value:e})=>e===`white`?`black`:`white`};
+
+
+    span {
+        display: block;
+        width: 40px;
+        height: 40px;
+        border-width: 2px;
+        border-style: solid;
+        border-top-left-radius: 16px;
+        border-color: ${({value:e})=>e};
+        border-right: none;
+        border-bottom: none;
+    }
+`,A=({value:e})=>(0,O.jsx)(k,{value:e,children:(0,O.jsx)(`span`,{})})})),j,Ee,De,Oe=t((()=>{e(n()),v(),j=p(),Ee=y.div`
+    minwidth: 48px;
+    minheight: 48px;
+    padding: 8px 0 0 8px;
+    border-image: ${({value:e})=>e};
+`,De=({value:e})=>(0,j.jsx)(Ee,{value:e,children:(0,j.jsx)(`span`,{})})})),ke,Ae,je,Me=t((()=>{e(n()),v(),ke=p(),Ae=y.div`
+    width: 32px;
+    height: 32px;
+    border-style: solid;
+    border-color: #999;
+    border-width: 12px;
+    border-right: none;
+    border-bottom: none;
+    border-top-left-radius: ${({value:e})=>e};
+`,je=({value:e})=>(0,ke.jsx)(Ae,{value:e})})),M,Ne,Pe,Fe=t((()=>{e(n()),v(),M=p(),Ne=y.div`
+    width: 64px;
+    padding-top: ${({value:e})=>e};
+    background: #666;
+
+    span {
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: 2px;
+        height: 28px;
+        background: #999;
+    }
+`,Pe=({value:e})=>(0,M.jsx)(Ne,{value:e,children:(0,M.jsx)(`span`,{})})})),Ie,Le,Re,ze=t((()=>{e(n()),v(),Ie=p(),Le=y.div`
+    width: 64px;
+    height: 64px;
+    box-shadow: ${({value:e})=>e};
+`,Re=({value:e})=>(0,Ie.jsx)(Le,{value:e})})),Be,Ve,He,Ue=t((()=>{d(),e(n()),v(),Be=p(),Ve=y.div`
+    background: #999;
+    font-size: 16px;
+    line-height: 32px;
+    text-align: center;
+    width: 200px;
+    color: white;
+
+    ${re(`
+        filter: brightness(${({value:e})=>e});
+    `)}
+`,He=({value:e})=>(0,Be.jsx)(Ve,{value:e,children:`hover me`})})),We,Ge,Ke,qe=t((()=>{e(n()),v(),We=p(),Ge=y.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    font-size: 20px;
+    font-weight: 700;
+    color: ${({value:e})=>e};
+    background: ${({value:e})=>e===`white`?`black`:`white`};
+`,Ke=({value:e})=>(0,We.jsx)(Ge,{value:e,children:`A`})})),N,Je,P,Ye=t((()=>{e(n()),v(),N=p(),Je=y.div`
+    font-family: ${({value:e})=>e};
+    font-size: 20px;
+    font-weight: 600;
+
+    p:first-child {
+        font-weight: 700;
+    }
+
+    p:last-child {
+        font-weight: 400;
+    }
+`,P=({value:e})=>(0,N.jsxs)(Je,{value:e,children:[(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (700)`}),(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (500)`}),(0,N.jsx)(`p`,{children:`Lorem ipsum dolor sit amet (400)`})]})})),Xe,Ze,Qe,$e=t((()=>{e(n()),v(),Xe=p(),Ze=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-size: ${({value:e})=>e};
+`,Qe=({value:e})=>(0,Xe.jsx)(Ze,{value:e,children:`Lorem ipsum dolor sit amet`})})),et,tt,nt,rt=t((()=>{e(n()),v(),et=p(),tt=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-style: ${({value:e})=>e};
+    font-size: 14px;
+`,nt=({value:e})=>(0,et.jsx)(tt,{value:e,children:`Lorem ipsum dolor sit amet.`})})),it,at,ot,st=t((()=>{e(n()),v(),it=p(),at=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-size: 20px;
+    font-weight: ${({value:e})=>e};
+`,ot=({value:e})=>(0,it.jsx)(at,{value:e,children:`Lorem ipsum dolor sit amet`})})),ct,lt,ut,dt=t((()=>{e(n()),v(),ct=p(),lt=y.div`
+    height: ${({value:e})=>e};
+    width: 40px;
+    background-color: black;
+`,ut=({value:e})=>(0,ct.jsx)(lt,{value:e})})),ft,pt,mt,ht=t((()=>{e(n()),v(),ft=p(),pt=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    letter-spacing: ${({value:e})=>e};
+    font-size: 14px;
+`,mt=({value:e})=>(0,ft.jsx)(pt,{value:e,children:`Lorem ipsum dolor sit amet.`})})),gt,_t,vt,yt=t((()=>{e(n()),v(),gt=p(),_t=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    line-height: ${({value:e})=>e};
+    font-size: 14px;
+`,vt=({value:e})=>(0,gt.jsx)(_t,{value:e,children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut, bibendum condimentum nunc.`})})),bt,xt,St,Ct=t((()=>{e(n()),v(),bt=p(),xt=y.div`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    line-height: ${({value:e})=>e};
+    font-size: 14px;
+`,St=({value:e})=>(0,bt.jsx)(xt,{value:e,children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut, bibendum condimentum nunc.`})})),F,wt,Tt,Et=t((()=>{e(n()),v(),F=p(),wt=y.div`
+    background: white;
+    width: 48px;
+    height: 48px
+    padding: 8px 0 0 8px;
+    background: ${({value:e})=>e===`white`?`black`:`white`};
+
+
+    span {
+        display: block;
+        width: 40px;
+        height: 40px;
+        border-width: 2px;
+        border-style: solid;
+        border-top-left-radius: 16px;
+        border-color: ${({value:e})=>e};
+        border-right: none;
+        border-bottom: none;
+    }
+`,Tt=({value:e})=>(0,F.jsx)(wt,{value:e,children:(0,F.jsx)(`span`,{})})})),I,Dt,Ot,kt=t((()=>{e(n()),v(),I=p(),Dt=y.div`
+    width: 64px;
+    padding-top: 2px;
+    background: #666;
+
+    span {
+        height: 2px;
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: ${({value:e})=>e};
+        height: 28px;
+        background: #999;
+    }
+`,Ot=({value:e})=>(0,I.jsx)(Dt,{value:e,children:(0,I.jsx)(`span`,{})})})),L,At,jt,Mt=t((()=>{e(n()),v(),L=p(),At=y.div`
+    width: 64px;
+    padding-top: ${({value:e})=>e};
+    background: #666;
+
+    span {
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: 2px;
+        height: 28px;
+        background: #999;
+    }
+`,jt=({value:e})=>(0,L.jsx)(At,{value:e,children:(0,L.jsx)(`span`,{})})})),Nt,Pt,Ft,It=t((()=>{e(n()),v(),Nt=p(),Pt=y.div`
+    width: 64px;
+    height: 64px;
+    background-color: ${({value:e})=>e};
+`,Ft=({value:e})=>(0,Nt.jsx)(Pt,{value:e})})),Lt,Rt,R,zt=t((()=>{e(n()),v(),Lt=p(),Rt=y.div`
+    width: ${({value:e})=>e};
+    height: ${({value:e})=>e};
+    background-color: black;
+`,R=({value:e})=>(0,Lt.jsx)(Rt,{value:e})})),Bt,Vt,z,Ht=t((()=>{e(n()),v(),Bt=p(),Vt=y.div`
+    width: ${({value:e})=>e};
+    height: 40px;
+    background-color: black;
+`,z=({value:e})=>(0,Bt.jsx)(Vt,{value:e})})),B,Ut,Wt,Gt=t((()=>{e(n()),v(),B=p(),Ut=y.div`
+    text-decoration: ${({value:e})=>e};
+    font-size: 20px;
+    font-weight: 600;
+
+    p:first-child {
+        font-weight: 700;
+    }
+
+    p:last-child {
+        font-weight: 400;
+    }
+`,Wt=({value:e})=>(0,B.jsx)(Ut,{value:e,children:(0,B.jsx)(`p`,{children:`Lorem ipsum dolor sit amet`})})})),V,Kt,qt,Jt=t((()=>{e(n()),v(),V=p(),Kt=y.div`
+    animation: moveBackAndForth ${({value:e})=>e}ms infinite alternate;
+
+    @keyframes moveBackAndForth {
+        from {
+            padding-left: 0px;
+        }
+        to {
+            padding-left: 100px;
+        }
+    }
+`,qt=({value:e})=>(0,V.jsx)(Kt,{value:e,children:(0,V.jsx)(`p`,{children:`Lorem ipsum`})})})),Yt,Xt=t((()=>{Yt=()=>null})),H,Zt,Qt,$t=t((()=>{e(n()),v(),H=p(),Zt=y.div`
+    transition: all ${({value:e})=>e};
+
+    padding-left: 0px;
+    &:hover {
+        padding-left: 100px;
+    }
+`,Qt=({value:e})=>(0,H.jsx)(Zt,{value:e,children:(0,H.jsx)(`p`,{children:`Hover me, please 🙏`})})})),en,tn=t((()=>{en=({value:e})=>null})),nn,rn,an,on=t((()=>{e(n()),v(),nn=p(),rn=y.div`
+    width: 64px;
+    height: 64px;
+    color: white;
+    background: ${({value:e})=>e};
+`,an=({value:e})=>(0,nn.jsx)(rn,{value:e})}));function sn(e){let t=Object.entries(un).find(([t])=>e.startsWith(t));return t&&t[1]}function cn(e){let t=e.split(`.`).pop()||``;return t in U?U[t]:t}function ln(e){return dn[sn(e.name)||cn(e.name)||``]}var un,U,dn,fn,pn=t((()=>{we(),Te(),Oe(),Me(),Fe(),ze(),Ue(),qe(),Ye(),$e(),rt(),st(),dt(),ht(),yt(),Ct(),Et(),kt(),Mt(),It(),zt(),Ht(),Gt(),Jt(),Xt(),$t(),tn(),on(),un={"icon.size":`size`,spacing:`space`,sizing:`space`,radius:`borderRadius`,"dsInternalPrimitive.button.borderWeight":`borderWidth`,"icon.fieldLayout.width":`horizontalPadding`,"icon.fieldLayout.height":`horizontalPadding`,background:`color`,"color.border.ai.button.borderImage":`borderImage`,"color.border.ai.surface.borderImage":`borderImage`,"color.background.ai.surface.linearGradient":`background`,color:`color`,"spinner.icon.color":`color`,"dsInternalPrimitive.color":`color`,"exp.color":`color`,"badge.base.color":`color`,"badge.accent":`color`,content:`color`,elevation:`boxShadow`,dropShadow:`boxShadow`,"motion.components.interaction":`transition`,"calloutBanner.background":`background`,"alertBanner.background":`background`},U={color:`fgColor`,lineHeight:`lineHeightPixels`,shadow:`boxShadow`,borderImage:`borderImage`,offset:`size`,x1:`easingCoordinate`,y1:`easingCoordinate`,x2:`easingCoordinate`,y2:`easingCoordinate`,short:`duration`,function:`easing`,functionName:`easing`},dn={background:{renderer:an},bgColor:{renderer:D},borderColor:{renderer:A},borderImage:{renderer:De},borderRadius:{renderer:je},brightness:{renderer:He},color:{renderer:Ft},fgColor:{renderer:Ke},fontFamily:{renderer:P},fontSize:{renderer:Qe},fontWeight:{renderer:ot},fontStyle:{renderer:nt},letterSpacing:{renderer:mt},gap:{renderer:z},height:{renderer:ut},horizontalPadding:{renderer:R},lineHeightRatio:{renderer:St},lineHeightPixels:{renderer:vt},outlineColor:{renderer:Tt},outlineOffset:{renderer:Ot},outlineWidth:{renderer:jt},borderWidth:{renderer:Pe},padding:{renderer:R},size:{renderer:R},space:{renderer:z},boxShadow:{renderer:Re},typeface:{renderer:P},verticalPadding:{renderer:R},textDecoration:{renderer:Wt},duration:{renderer:qt},easing:{renderer:Yt},transition:{renderer:Qt},easingCoordinate:{renderer:en}},fn=e=>{let t=ln(e);if(!t)throw Error(`No renderer for token "${e.name}".`);return t}})),mn,hn,gn,_n,vn=t((()=>{v(),mn=y.li`
+    list-style: none;
+    margin-bottom: 32px;
+
+    span[title] {
+        text-align: center;
+        display: block;
+    }
+`,hn=y.p`
+    margin: 0;
+    margin-top: 9px;
+    font-size: 14px;
+`,gn=y.div`
+    padding-top: 6px;
+`,_n=y.p`
+    margin: 0;
+    width: 160px;
+    text-align: right;
+    font-size: 16px;
+    line-height: 32px;
+`,y.div`
+    padding-top: 2px;
+`})),W,yn,bn=t((()=>{d(),_(),e(n()),pn(),vn(),W=p(),yn=({token:e})=>{let t=s(e.token),n=fn(e).renderer;return(0,W.jsx)(mn,{children:(0,W.jsxs)(g,{gap:`16`,direction:`column`,children:[(0,W.jsxs)(m,{gap:`16`,columns:[`90px`,`1fr`,`2fr`],children:[(0,W.jsx)(hn,{children:(0,W.jsxs)(h,{highlight:`blue`,children:[`(--`,e.id,`)`]})}),(0,W.jsxs)(g,{direction:`column`,gap:`4`,children:[(0,W.jsx)(de,{variant:`default-semibold`,children:e.name}),(0,W.jsxs)(de,{variant:`default-regular`,children:[`@`,e.name.replace(/\./g,`-`)]})]}),(0,W.jsx)(gn,{children:(0,W.jsx)(g,{direction:`column`,gap:`8`,justifyContent:`start`,children:e.colorSchemeAware&&(0,W.jsx)(`div`,{children:(0,W.jsx)(h,{children:(0,W.jsx)(`span`,{title:`this token may have different values, depending on color scheme`,children:`color scheme aware`})})})})})]}),(0,W.jsxs)(m,{gap:`64`,columns:[`auto`,`1fr`],alignItems:`center`,children:[(0,W.jsx)(_n,{children:(0,W.jsx)(`span`,{children:t})}),(0,W.jsx)(`div`,{children:(0,W.jsx)(n,{name:e.name,value:t})})]})]})})}})),xn,Sn,Cn=t((()=>{v(),xn=y.ul`
+    margin: 0;
+    padding: 0;
+`,Sn=y.div`
+    font-size: 24px;
+
+    h3 {
+        margin: 0;
+    }
+`})),wn,Tn=t((()=>{wn={but:{name:`button`,alternatives:[`action`],note:`See also: props of <Button> component`},layo:{name:`layout`,alternatives:[`gap`,`padding`,`space`],note:`See also: props of <Layout> components`},align:{name:`align`,alternatives:[],note:`You probably want to look at the <Layout> components`},just:{name:`justify`,alternatives:[],note:`You probably want to look at the <Layout> components`},bol:{name:`bold`,alternatives:[`weight`],note:`See also <Text strong> component.`},help:{name:`help? :-D`,alternatives:[],note:`To be continued...`}}})),En,Dn,On,kn=t((()=>{v(),En=y.h3`
+    margin: 0;
+    font-size: 24px;
+    font-weight: 400;
+`,Dn=y.h3`
+    font-size: 16px;
+    font-weight: 400;
+`,On=y.h3`
+    font-size: 16px;
+    font-weight: 400;
+`})),G,An,jn=t((()=>{_(),e(n()),kn(),G=p(),An=({hint:e})=>{let t=e.alternatives||[];return(0,G.jsxs)(g,{gap:`24`,column:!0,children:[(0,G.jsxs)(En,{children:[`Searching for `,(0,G.jsx)(h,{children:e.name}),`?`,` `]}),(0,G.jsxs)(g,{gap:`8`,column:!0,children:[t.length&&(0,G.jsxs)(Dn,{children:[`Try searchinng for`,` `,t.map((e,n)=>(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(h,{children:e},e),n+2<t.length?`, `:``,n+2===t.length?` or `:``,n===t.length-1?` `:``]})),`instead.`]}),e.note&&(0,G.jsxs)(On,{children:[(0,G.jsx)(`strong`,{children:`Note:`}),` `,e.note]})]})]})}})),K,Mn,Nn=t((()=>{e(n()),Tn(),jn(),K=p(),Mn=({terms:e})=>e?(0,K.jsx)(K.Fragment,{children:Object.entries(wn).map(([t,n])=>e.toLowerCase().indexOf(t)>-1&&(0,K.jsx)(An,{hint:n},t))}):null})),q,J,Pn=t((()=>{_(),e(n()),T(),bn(),Cn(),Nn(),q=p(),J=()=>{let{results:e,terms:t}=w();return e.length?(0,q.jsx)(xn,{children:e.map(e=>(0,q.jsx)(yn,{token:e},e.id))}):(0,q.jsx)(Sn,{children:(0,q.jsxs)(g,{gap:`24`,column:!0,children:[(0,q.jsx)(`h3`,{children:`No tokens found`}),(0,q.jsx)(Mn,{terms:t})]})})}})),Fn,In,Ln=t((()=>{v(),Fn=y.div`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+
+    label {
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    select {
+        height: 32px;
+        padding: 2.5px 5px;
+        border-width: 1px;
+        border-color: ${({isNotDefault:e})=>e?`orange;`:`#ccc`};
+    }
+`,In=y.select`
+    padding: 5px 10px;
+`})),Rn,Y,zn,Bn=t((()=>{f(),Rn=e(n()),T(),Ln(),Y=p(),zn=({onChange:e})=>{let{colorScheme:t,setColorScheme:n}=w(),r=(0,Rn.useCallback)(t=>{let r=t.target.value;window?.localStorage?.setItem(`storybook.ds-color-scheme`,r),n(r??void 0),e?.(r)},[e,n]);return(0,Y.jsxs)(Fn,{isNotDefault:!!t,children:[(0,Y.jsx)(`label`,{children:`Color Scheme`}),(0,Y.jsxs)(In,{value:t,onChange:r,children:[(0,Y.jsx)(`option`,{value:``,children:`-- no color scheme --`},`none`),Object.keys(i).map(e=>(0,Y.jsx)(`option`,{value:e,children:e},e))]})]})}})),Vn,Hn=t((()=>{v(),Vn=y.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 48px;
+    min-height: 24px;
+    font-size: 16px;
+
+    p {
+        margin: 0;
+    }
+
+    a {
+        color: #0077b3;
+    }
+`})),X,Un,Wn,Gn,Kn,qn=t((()=>{_(),e(n()),T(),Hn(),X=p(),Un=({id:e})=>(0,X.jsxs)(X.Fragment,{children:[`Searching for token ID `,(0,X.jsx)(h,{highlight:`blue`,children:e}),`.`]}),Wn=({terms:e,colorScheme:t,results:n})=>(0,X.jsxs)(X.Fragment,{children:[`Found `,n.length,` results matching`,` `,(0,X.jsx)(h,{highlight:`green`,children:e}),` `,t?(0,X.jsxs)(X.Fragment,{children:[`within `,(0,X.jsx)(h,{highlight:`green`,children:`color scheme aware`}),` `,`tokens.`]}):(0,X.jsx)(X.Fragment,{children:`within tokens without color scheme.`})]}),Gn=({colorScheme:e,results:t})=>(0,X.jsx)(X.Fragment,{children:e?(0,X.jsxs)(X.Fragment,{children:[`Showing all `,(0,X.jsx)(h,{highlight:`blue`,children:t.length}),` `,`tokens that are`,` `,(0,X.jsx)(h,{highlight:`green`,children:`color scheme aware`}),`.`]}):(0,X.jsxs)(X.Fragment,{children:[`Showing all `,(0,X.jsx)(h,{highlight:`blue`,children:t.length}),` `,`color scheme anostic tokens.`]})}),Kn=()=>{let{terms:e,colorScheme:t,results:n}=w(),r=e?.startsWith(`--`)&&e?.substring(2);return(0,X.jsx)(Vn,{children:(0,X.jsxs)(`p`,{children:[r&&(0,X.jsx)(Un,{id:r}),e&&!r&&(0,X.jsx)(Wn,{terms:e,colorScheme:t,results:n}),!e&&!r&&(0,X.jsx)(Gn,{colorScheme:t,results:n}),` `,t&&(0,X.jsx)(`a`,{href:`./?path=/story/guides-color-schemes-intro--page`,children:`Learn more`})]})})}})),Jn,Yn,Xn,Zn,Qn=t((()=>{v(),Jn=y.div`
+    position: relative;
+    margin-top: -20px;
+    padding-bottom: 200px;
+    h1 {
+        margin: 0;
+    }
+`,Yn=y.div`
+    position: fixed;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    padding: 20px 20px 24px;
+    gap: 16px;
+    background: white;
+`,Xn=y.div`
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+`,Zn=y.input`
+    flex: 1;
+    padding: 8px;
+    font-size: 16px;
+    height: 32px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: ${({terms:e})=>e?`orange;`:`#ccc`};
+`})),Z,Q,$n,er=t((()=>{d(),_(),Z=e(n()),T(),Bn(),qn(),Qn(),Q=p(),$n=()=>{let{theme:e}=ee(),{themes:t}=te(),{setTheme:n}=ne(),{colorScheme:r,terms:i,setColorScheme:a,setSearchTerms:o}=w(),s=(0,Z.useMemo)(()=>new URL(window.top?.location.href||``),[]),c=s.searchParams,l=c.get(`theme`),u=l&&t?.find(e=>e.name===l),d=c.get(`colorScheme`),re=c.get(`terms`);(0,Z.useEffect)(()=>{l&&(l!==e.name&&n&&u&&n(u),l&&d!==r&&a(d),o(re||``)),c.delete(`theme`),c.delete(`colorScheme`),c.delete(`terms`),window.top?.history.replaceState({},``,s)},[]);let f=(0,Z.useCallback)(e=>o(e),[o]);return(0,Q.jsx)(Jn,{children:(0,Q.jsx)(Yn,{children:(0,Q.jsx)(Xn,{children:(0,Q.jsxs)(g,{gap:`16`,direction:`column`,children:[(0,Q.jsx)(g,{justifyContent:`space-between`,alignItems:`start`,children:(0,Q.jsx)(`h1`,{id:`tokens`,className:`sbdocs sbdocs-h1 css-1j28tt`,children:`Token Explorer`})}),(0,Q.jsxs)(g,{gap:`8`,nowrap:!0,children:[(0,Q.jsx)(Zn,{terms:i,type:`text`,placeholder:`examples: teal, 300, action, primary, xs, --4adef, #00, 12px`,onChange:e=>f(e.target.value),value:i}),(0,Q.jsx)(zn,{})]}),(0,Q.jsx)(Kn,{})]})})})})}}));function tr(e){return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(ce,{title:`Guides/Token Explorer`}),`
+`,(0,$.jsx)(ae,{theme:`tokyo-ui`,children:(0,$.jsxs)(be,{children:[(0,$.jsx)($n,{}),(0,$.jsx)(ie,{children:(0,$.jsx)(J,{})})]})})]})}function nr(e={}){let{wrapper:t}={...le(),...e.components};return t?(0,$.jsx)(t,{...e,children:(0,$.jsx)(tr,{...e})}):tr(e)}var $;t((()=>{$=p(),ue(),oe(),se(),Pn(),er(),xe()}))();export{nr as default};

package/dist/assets/00.using-responsive-props-B3Gr_s-n.js

@@ -0,0 +1,18 @@
+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-f34VuKy-.js";import{r as c}from"./react-B8jdHdWa.js";import{t as l}from"./mdx-react-shim-Bi0BC7jy.js";import{g as u,t as d}from"./dist-XW9XCd1i.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:`}),`
+`,(0,_.jsx)(t.pre,{children:(0,_.jsx)(t.code,{className:`language-jsx`,children:`<Component prop={<value>} />
+<Component prop={{ _: <value>, '<breakpoint>': <value>, ... }} />
+`})}),`
+`,(0,_.jsxs)(t.p,{children:[`Where `,(0,_.jsx)(t.code,{children:`_`}),` is the value for the smallest breakpoint, and `,(0,_.jsx)(t.code,{children:`<breakpoint>`}),` is one of
+the following, predefined values:`]}),`
+`,(0,_.jsx)(p,{}),`
+`,(0,_.jsx)(t.h2,{id:`example`,children:`Example`}),`
+`,`
+`,(0,_.jsx)(u,{src:v,size:`24`}),`
+`,(0,_.jsx)(u,{src:v,size:{_:`24`,"medium-l":`48`,"wide-s":`64`}}),`
+`,(0,_.jsx)(t.pre,{children:(0,_.jsx)(t.code,{className:`language-jsx`,children:`<Avatar src={url} size="24" />
+<Avatar src={url} size={{ _: '24', 'medium-l': '48', 'wide-s': '64' }} />
+`})}),`
+`,(0,_.jsxs)(t.p,{children:[`Try resizing your viewport using the dev tools to see the `,(0,_.jsx)(t.code,{children:`Avatar`}),` size update.`]})]})}function g(e={}){let{wrapper:t}={...c(),...e.components};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(h,{...e})}):h(e)}var _,v;t((()=>{_=a(),l(),d(),o(),m(),v=`./assets/avatar-1.png`}))();export{g as default,v as url};

package/dist/assets/01.semantic-tokens-ClbORo2f.js

@@ -0,0 +1,11 @@
+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-f34VuKy-.js";import{r as l}from"./react-B8jdHdWa.js";import{t as u}from"./mdx-react-shim-Bi0BC7jy.js";import{a as d,i as f,t as p,v as m,y as h}from"./dist-XW9XCd1i.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`}),`
+`,(0,D.jsx)(o,{children:(0,D.jsx)(x,{})}),`
+`,(0,D.jsx)(t.h2,{id:`background-tokens`,children:`Background tokens`}),`
+`,(0,D.jsx)(o,{children:(0,D.jsx)(S,{})}),`
+`,(0,D.jsx)(t.h2,{id:`action`,children:`Action`}),`
+`,(0,D.jsx)(o,{children:(0,D.jsx)(b,{})}),`
+`,(0,D.jsx)(t.h2,{id:`border-tokens`,children:`Border tokens`}),`
+`,(0,D.jsx)(o,{children:(0,D.jsx)(C,{})})]})}function E(e={}){let{wrapper:t}={...l(),...e.components};return t?(0,D.jsx)(t,{...e,children:(0,D.jsx)(T,{...e})}):T(e)}var D;t((()=>{D=a(),u(),s(),w()}))();export{E as default};

package/dist/assets/01.using-shorthand-props-CZYYf4mA.js

@@ -0,0 +1,39 @@
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-f34VuKy-.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-Bi0BC7jy.js";function o(e){let t={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`}),`
+`,(0,c.jsx)(t.p,{children:`When you provide a single value, it applies to all sides:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding="8" /> // 8px padding on all sides
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`two-values`,children:`Two Values`}),`
+`,(0,c.jsx)(t.p,{children:`When you provide an array with two values, they are applied as [vertical, horizontal]:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16']} />
+// 8px padding top/bottom
+// 16px padding left/right
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`three-values`,children:`Three Values`}),`
+`,(0,c.jsx)(t.p,{children:`With three values, they are applied as [top, horizontal, bottom]:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16', '24']} />
+// 8px padding top
+// 16px padding left/right
+// 24px padding bottom
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`four-values`,children:`Four Values`}),`
+`,(0,c.jsx)(t.p,{children:`With four values, they are applied as [top, right, bottom, left]:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box padding={['8', '16', '24', '32']} />
+// 8px padding top
+// 16px padding right
+// 24px padding bottom
+// 32px padding left
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`combining-with-responsive-props`,children:`Combining with Responsive Props`}),`
+`,(0,c.jsx)(t.p,{children:`You can combine shorthand values with responsive props:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-jsx`,children:`<Box
+    padding={{
+        _: '8',
+        'medium-l': ['16', '24'],
+        'wide-s': ['16', '24', '32', '40'],
+    }}
+/>
+`})}),`
+`,(0,c.jsx)(t.p,{children:`This allows you to have different padding configurations at different breakpoints.`})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};