@preply/ds-docs 0.100.0 → 0.100.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.applications-CK1G494a.js → 00.applications-SuGhZ2d6.js} +1 -1
- package/dist/assets/{00.favicons.guide-DFZstk75.js → 00.favicons.guide-DzTzQGOX.js} +1 -1
- package/dist/assets/{00.token-explorer-vANGBf-o.js → 00.token-explorer-YKX25K0Z.js} +1 -1
- package/dist/assets/{00.using-responsive-props-DfMLAuhl.js → 00.using-responsive-props-B53R_GrL.js} +1 -1
- package/dist/assets/{01.semantic-tokens-CXp_pGcs.js → 01.semantic-tokens-BRIHpkCy.js} +1 -1
- package/dist/assets/{10.fonts.guide-il7LsKNk.js → 10.fonts.guide-CpnQZZLi.js} +1 -1
- package/dist/assets/{10.ssr-D7blYPAm.js → 10.ssr-Kxsb6CV_.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-wO5p-8ex.js → 11.languageFont.explorer-Ckz-uF4N.js} +1 -1
- package/dist/assets/{11.ssr.app-router-Dp8fYlX9.js → 11.ssr.app-router-DC-0dbEn.js} +1 -1
- package/dist/assets/{20.libraries-BRDNlWVz.js → 20.libraries-CmacBW8t.js} +1 -1
- package/dist/assets/{30.icons.explorer-tc8AvEUI.js → 30.icons.explorer-CfMFkyQd.js} +1 -1
- package/dist/assets/{30.storybook-Dx57Cm0-.js → 30.storybook-lO7E7IxU.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-CkyZVNPW.js → 40.illustrations.explorer-RiA5UJEs.js} +1 -1
- package/dist/assets/{90.advanced-DmyFykCE.js → 90.advanced-CQ8Bc0wk.js} +1 -1
- package/dist/assets/Avatar-Bf-ZQ5SI.js +6 -0
- package/dist/assets/Avatar-C2bZgjPC.css +1 -0
- package/dist/assets/Avatar-D4PHplD2.css +1 -0
- package/dist/assets/Avatar-DUpkb2KC.js +1 -0
- package/dist/assets/{Avatar.stories-CeEu4myZ.js → Avatar.stories-HAUC3h0w.js} +1 -1
- package/dist/assets/AvatarWithStatus-CQH8pdXh.css +1 -0
- package/dist/assets/{AvatarWithStatus.stories-BJ-eSXmN.js → AvatarWithStatus.stories-BeLSoM6l.js} +4 -4
- package/dist/assets/Badge-DyIodSmT.css +1 -0
- package/dist/assets/{Badge.stories--_D4jxFW.js → Badge.stories-YB7vNEb0.js} +1 -1
- package/dist/assets/Box-Ca7OsY0c.css +1 -0
- package/dist/assets/Box.stories-yFcUfGK0.js +12 -0
- package/dist/assets/Button-Bi4jW9CV.js +1 -0
- package/dist/assets/{Button-BcWq98N4.css → Button-N0VRM6A0.css} +1 -1
- package/dist/assets/{Button.stories-DeaTumH5.js → Button.stories-De8WlQy7.js} +1 -1
- package/dist/assets/Chips-C7eOEIzP.css +1 -0
- package/dist/assets/{Chips.stories-D0KLA2zs.js → Chips.stories-CJsvbrSL.js} +3 -3
- package/dist/assets/{Color-ERTF36HU-AoejI-3x.js → Color-ERTF36HU-x3UpVubc.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-COjE2a03.js → DocsRenderer-CFRXHY34-D8Tq4G-5.js} +1 -1
- package/dist/assets/{FieldAdditionalText-CYDgHYqE.js → FieldAdditionalText-DCd07ysy.js} +1 -1
- package/dist/assets/FieldAdditionalText-Dt30WqOi.css +1 -0
- package/dist/assets/{FieldAdditionalText.stories-DMPptKrK.js → FieldAdditionalText.stories-6JjvlIna.js} +1 -1
- package/dist/assets/{FieldButton-BmJuGdb9.css → FieldButton-DWzsuKt5.css} +1 -1
- package/dist/assets/{FieldButton-Hn4Nt4AY.js → FieldButton-F9R8bzuR.js} +1 -1
- package/dist/assets/{FieldButton.stories-CDX7r3os.js → FieldButton.stories-Dmgk0NRP.js} +1 -1
- package/dist/assets/FieldLayout-BYUVHDic.js +1 -0
- package/dist/assets/FieldLayout-CLzA8pBH.css +1 -0
- package/dist/assets/{FieldLayout.stories-CsOIyIy1.js → FieldLayout.stories-gLIudz9F.js} +1 -1
- package/dist/assets/{FieldLayoutBase-B6YdbZ6h.js → FieldLayoutBase-BAZH_iVk.js} +2 -2
- package/dist/assets/FieldLayoutBase-CA9Dmb-I.css +1 -0
- package/dist/assets/{Heading-CYbnLj-V.css → Heading-C_b1pABg.css} +1 -1
- package/dist/assets/Heading-Des9-Kxs.js +2 -0
- package/dist/assets/Heading-eTizhp-a.js +1 -0
- package/dist/assets/{Heading-BHdvl4Pz.css → Heading-o4ElOKlL.css} +1 -1
- package/dist/assets/{Heading.stories-BzB2AhV5.js → Heading.stories-s72xKv_y.js} +1 -1
- package/dist/assets/Icon-BEGCR1FC.js +1 -0
- package/dist/assets/Icon-D66V3Lr7.css +1 -0
- package/dist/assets/{Icon-1PHa-WUi.js → Icon-DqOWgXnU.js} +2 -2
- package/dist/assets/{Icon-RSC-BO9-cThF.js → Icon-RSC-auOdhCGC.js} +1 -1
- package/dist/assets/{Icon.stories-DtizCuFc.js → Icon.stories-DrSDJY-K.js} +1 -1
- package/dist/assets/InputText-DEpRpqG2.js +1 -0
- package/dist/assets/LayoutFlex-4LBfyC68.js +1 -0
- package/dist/assets/{LayoutFlex-C_oOQpZ4.css → LayoutFlex-BaK05rll.css} +1 -1
- package/dist/assets/LayoutFlex-BsmGUxSb.css +1 -0
- package/dist/assets/LayoutFlex-CI-IyFab.js +1 -0
- package/dist/assets/LayoutFlex-DmMxJGKY.css +1 -0
- package/dist/assets/{LayoutFlex.stories-IIF2rvH0.js → LayoutFlex.stories-D3WU4z6n.js} +2 -2
- package/dist/assets/LayoutGrid-BHkpEiNP.css +1 -0
- package/dist/assets/LayoutGrid-Bbpoq4GZ.js +1 -0
- package/dist/assets/LayoutGrid-DL1Pib1N.css +1 -0
- package/dist/assets/LayoutGrid.stories-ByBJ8ZKQ.js +32 -0
- package/dist/assets/LayoutGridItem-BYGrMSD0.css +1 -0
- package/dist/assets/LayoutGridItem-yCAtLcT1.js +1 -0
- package/dist/assets/Link-BR07cPLn.css +1 -0
- package/dist/assets/{Link.stories-CgIWKb7N.js → Link.stories-027t2FnU.js} +1 -1
- package/dist/assets/Loader-DS2G2nvd.css +1 -0
- package/dist/assets/{Loader.stories-97ZtDruE.js → Loader.stories-Bg8CFUeL.js} +1 -1
- package/dist/assets/{NumberField.stories-D6BAsdVG.js → NumberField.stories-BkIJHxVu.js} +1 -1
- package/dist/assets/{PasswordField.stories-DBQ0HNGp.js → PasswordField.stories-LShIvEnK.js} +1 -1
- package/dist/assets/PreplyLogo-BtQbOpx9.css +1 -0
- package/dist/assets/{PreplyLogo.stories-BL9K1n11.js → PreplyLogo.stories-D9ffWvsM.js} +2 -2
- package/dist/assets/SelectField-C0MEcwkv.css +1 -0
- package/dist/assets/{SelectField.stories-tyOe059N.js → SelectField.stories-CGmVU2iA.js} +3 -3
- package/dist/assets/Spinner-CbwfZ3c6.css +1 -0
- package/dist/assets/{Spinner-BiuIdk-f.js → Spinner-DNhrV5BK.js} +1 -1
- package/dist/assets/Text-CfFW9YKH.js +1 -0
- package/dist/assets/{Text-6Trsxbm_.css → Text-D6vaNiUQ.css} +1 -1
- package/dist/assets/Text-a99inIAW.js +1 -0
- package/dist/assets/{Text.stories-DIK8PpuP.js → Text.stories-DwWKizgM.js} +1 -1
- package/dist/assets/TextField-5xfz0nlz.css +1 -0
- package/dist/assets/TextField-C2nBL3Da.js +1 -0
- package/dist/assets/{TextField.stories-BTMzUeW-.js → TextField.stories-DPLzV9sr.js} +1 -1
- package/dist/assets/TextHighlighted-BBQxVK8S.css +1 -0
- package/dist/assets/TextHighlighted-CojzyNhw.js +1 -0
- package/dist/assets/{TextHighlighted.stories-C6caRrRk.js → TextHighlighted.stories-DB_R-gDs.js} +1 -1
- package/dist/assets/TextInline-D6fVMZ22.css +1 -0
- package/dist/assets/{TextInline.stories-CBHic_1S.js → TextInline.stories-HT10loYE.js} +1 -1
- package/dist/assets/{TextareaField.stories-Cw7T6aDu.js → TextareaField.stories-px51-LZi.js} +1 -1
- package/dist/assets/Toast-BH8aT7PL.css +1 -0
- package/dist/assets/{Toast.stories-BE-Od6_I.js → Toast.stories-CmTZ3lau.js} +9 -9
- package/dist/assets/align-self-B97O5ntC.css +1 -0
- package/dist/assets/align-self-bURpNU3k.js +1 -0
- package/dist/assets/{breakpoints-CyrKsux-.js → breakpoints-BN25rAYx.js} +1 -1
- package/dist/assets/{breakpoints-BUXrYEZw.js → breakpoints-D9ah2srw.js} +1 -1
- package/dist/assets/{breakpoints-DvqruxMv.js → breakpoints-Dn5rWbf8.js} +1 -1
- package/dist/assets/{changelog-DtO0uyMw.js → changelog-DGKwXUfP.js} +11 -6
- package/dist/assets/{chunk-NUUEMKO5-D8DRfNBv.js → chunk-NUUEMKO5-FMRMymcK.js} +1 -1
- package/dist/assets/{entry-preview-B6Q8ZEvx.js → entry-preview-_th98VNw.js} +1 -1
- package/dist/assets/{getTokenVar-B33mivlo.js → getTokenVar-DTR7cOAc.js} +1 -1
- package/dist/assets/{hover-BDOsUtRv.js → hover-As2R_PZU.js} +1 -1
- package/dist/assets/{hover-IrmzP1JH.js → hover-B59di2Vi.js} +1 -1
- package/dist/assets/{hover-BRF48b_j.js → hover-DjMp0VDE.js} +1 -1
- package/dist/assets/{iframe-DBivcL5k.js → iframe-C6ga-lcz.js} +2 -2
- package/dist/assets/{index-C4kryH8A.js → index-BdKDgH-N.js} +4 -4
- package/dist/assets/{index-BoI6f-rn.js → index-CAEOHB9f.js} +1 -1
- package/dist/assets/{index-KohlpUf_.js → index-Cdgl62si.js} +1 -1
- package/dist/assets/{intro-D58ebB88.js → intro-Dvcj45i2.js} +1 -1
- package/dist/assets/layout-relative-A0sx6VRO.css +1 -0
- package/dist/assets/layout-relative-DU9bR1fO.css +1 -0
- package/dist/assets/layout-relative-mMzJCmVd.js +1 -0
- package/dist/assets/layout-relative-qgYNk7GR.js +1 -0
- package/dist/assets/{migrating-from-less-D_R2m8xf.js → migrating-from-less-D0RjJs9l.js} +1 -1
- package/dist/assets/playground-DruFSVKj.css +1 -0
- package/dist/assets/{playground.stories-BDAAaDqV.js → playground.stories-CPIQUnVO.js} +1 -1
- package/dist/assets/{preview-C4dxfB53.js → preview-Dq4CwTqY.js} +1 -1
- package/dist/assets/{preview-WVZuZelo.js → preview-soLZ0BKj.js} +1 -1
- package/dist/assets/{preview-DefPfKf7.js → preview-vuEtMDr6.js} +2 -2
- package/dist/assets/text-accent-Bgi4eAtI.js +1 -0
- package/dist/assets/text-accent-Cu7YjM5H.js +1 -0
- package/dist/assets/text-accent-Dx3UOWlW.css +1 -0
- package/dist/assets/text-centered-B7xS0eZv.js +1 -0
- package/dist/assets/text-centered-C60nJKZS.css +1 -0
- package/dist/assets/text-centered-Cr-fOXNg.css +1 -0
- package/dist/assets/text-centered-yu4Ks4Ko.js +1 -0
- package/dist/assets/{tokens-Be_98AEx.js → tokens-BF82AwVd.js} +1 -1
- package/dist/assets/{tokens-DqFOkybS.js → tokens-Bqw-E6go.js} +1 -1
- package/dist/assets/{tokens-BJMjpQBu.js → tokens-DA876hrI.js} +1 -1
- package/dist/assets/{welcome-DUh3OYuJ.js → welcome-p3FME8OW.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +1096 -1096
- package/dist/project.json +1 -1
- package/package.json +2 -2
- package/dist/assets/Avatar-CMC1f2ap.js +0 -1
- package/dist/assets/Avatar-C_Ivl2OJ.css +0 -1
- package/dist/assets/Avatar-CdrzfxqX.css +0 -1
- package/dist/assets/Avatar-ChjnYBw8.js +0 -6
- package/dist/assets/AvatarWithStatus-BHuIncSZ.css +0 -1
- package/dist/assets/Badge-qZIBCtqe.css +0 -1
- package/dist/assets/Box-BL4O24lf.css +0 -1
- package/dist/assets/Box.stories-CKsbLrbi.js +0 -12
- package/dist/assets/Button-nBAVWX8O.js +0 -1
- package/dist/assets/Chips-Bg-Iq7L_.css +0 -1
- package/dist/assets/FieldAdditionalText-D5B921Kz.css +0 -1
- package/dist/assets/FieldLayout-B7_n5bbV.js +0 -1
- package/dist/assets/FieldLayout-BZ1fpSqd.css +0 -1
- package/dist/assets/FieldLayoutBase-ooChgnD7.css +0 -1
- package/dist/assets/Heading-C6cW6qCO.js +0 -1
- package/dist/assets/Heading-CZhNOr3V.js +0 -2
- package/dist/assets/Icon-D_2x8A6a.css +0 -1
- package/dist/assets/Icon-q8NWScOY.js +0 -1
- package/dist/assets/InputText-CkwpURmb.js +0 -1
- package/dist/assets/LayoutFlex-7BcqN14z.js +0 -1
- package/dist/assets/LayoutFlex-B6SliYTi.css +0 -1
- package/dist/assets/LayoutFlex-BwgjCIoK.css +0 -1
- package/dist/assets/LayoutFlex-C9DbvPvq.js +0 -1
- package/dist/assets/LayoutGrid-DGrLVVhg.css +0 -1
- package/dist/assets/LayoutGrid-fcFg4SRD.css +0 -1
- package/dist/assets/LayoutGrid-oqbnuSom.js +0 -1
- package/dist/assets/LayoutGrid.stories-nxl5t4l5.js +0 -32
- package/dist/assets/LayoutGridItem-CfwR9woQ.js +0 -1
- package/dist/assets/LayoutGridItem-Cmf9UhE2.css +0 -1
- package/dist/assets/Link-C3ZerqoM.css +0 -1
- package/dist/assets/Loader-BCe0B1QN.css +0 -1
- package/dist/assets/PreplyLogo-Dizczxil.css +0 -1
- package/dist/assets/SelectField-BbOJlyXx.css +0 -1
- package/dist/assets/Spinner-CRcxyZVe.css +0 -1
- package/dist/assets/Text-CYlrWT3v.js +0 -1
- package/dist/assets/Text-oNImySfo.js +0 -1
- package/dist/assets/TextField-CLxjBvbz.js +0 -1
- package/dist/assets/TextField-Ng210R-9.css +0 -1
- package/dist/assets/TextHighlighted-C50rgW-0.css +0 -1
- package/dist/assets/TextHighlighted-DQCrG5_q.js +0 -1
- package/dist/assets/TextInline-DecfA_VE.css +0 -1
- package/dist/assets/Toast-BiMN3bTF.css +0 -1
- package/dist/assets/align-self-_S_7q2fr.js +0 -1
- package/dist/assets/align-self-nBXHAsq5.css +0 -1
- package/dist/assets/layout-relative-Bf_E90qK.css +0 -1
- package/dist/assets/layout-relative-BzNtCPD5.js +0 -1
- package/dist/assets/layout-relative-C3ZQDUfH.css +0 -1
- package/dist/assets/layout-relative-QhDS34ks.js +0 -1
- package/dist/assets/playground-m9pbWKyC.css +0 -1
- package/dist/assets/text-accent-CQKpNEgF.js +0 -1
- package/dist/assets/text-accent-DF3GKQFh.js +0 -1
- package/dist/assets/text-accent-fMB88fHo.css +0 -1
- package/dist/assets/text-centered-Baai0DNp.js +0 -1
- package/dist/assets/text-centered-CRLDxSII.js +0 -1
- package/dist/assets/text-centered-D3YQ0UuT.css +0 -1
- package/dist/assets/text-centered-DMD6ilyB.css +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as o}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as o}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function r(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"installation-applications",children:"Installation: Applications"}),`
|
|
3
3
|
`,e.jsx(n.p,{children:"This guide applies to both client-side and server-side rendered React applications."}),`
|
|
4
4
|
`,e.jsx(n.h2,{id:"packages",children:"Packages"}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function o(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Assets/Favicons"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"favicons",children:"Favicons"}),`
|
|
3
3
|
`,e.jsxs(n.p,{children:["The optimised assets are available under ",e.jsx(n.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers, as well as Android and iOS devices."]}),`
|
|
4
4
|
`,e.jsxs(n.p,{children:["Refer to ",e.jsx(n.a,{href:"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs",rel:"nofollow",children:"How to Favicon in 2022: Six files that fit most needs"})," for a detailed breakdown of the formats."]}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"./index-DSz_1G2r.js";import{ae as F}from"./index-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as P}from"./index-DSz_1G2r.js";import{ae as F}from"./index-BdKDgH-N.js";import{L as p}from"./LayoutFlex-CI-IyFab.js";import{r as c}from"./index-CBqU2yxZ.js";import{g as E,u as O,T as v}from"./Text-CfFW9YKH.js";import{t as H}from"./tokens-D22H5zrO.js";import{i as W,T as d,u as N}from"./TextHighlighted-CojzyNhw.js";import{T as M,d as A,e as B}from"./constants-mdQROz_Y.js";import{e as L,u as D,C as _,c as V}from"./useTheme-ByES4oDS.js";import{L as y}from"./LayoutGrid-Bbpoq4GZ.js";import{d as o}from"./styled-components.browser.esm-BUFlhth0.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./layout-relative-qgYNk7GR.js";import"./classNames-Cqk1oqv4.js";import"./constants-DYYVurUY.js";import"./componentNames-BSriaIOD.js";import"./text-accent-Cu7YjM5H.js";import"./text-centered-yu4Ks4Ko.js";import"./breakpoints-BfMlrtxE.js";const q=(e,r)=>({token:r,name:e,id:r[M],type:r[A],colorSchemeAware:!!r[B]}),R=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return W(n)?[q(s,n)]:R(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>R(r,i)),Y=X(H),G=(e,r,i)=>e.filter(n=>{if(r==="-"||r==="--")return!0;if(r!=null&&r.startsWith("--"))return n.id.toLowerCase().startsWith(r.substring(2).toLowerCase());if(r){const s=n.name.toLowerCase().indexOf(r.toLowerCase())>-1,a=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||a)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=c.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var C;const U=((C=window==null?void 0:window.localStorage)==null?void 0:C.getItem("storybook.ds-color-scheme"))||void 0;function J(e,r){return Y.map(n=>({...n,value:`${E(e,r,n.token)}`}))}const Q=({children:e})=>{const{findColorScheme:r}=L(),{theme:i}=D(),[n,s]=c.useState(U),[a,h]=c.useState(""),[g,x]=c.useState([]),u=c.useCallback(m=>s(m),[s]),f=c.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return c.useEffect(()=>{const m=r(n||"base"),w=J(i,m);x(G(w,a,!!n))},[n,r,a,i]),t.jsx(z.Provider,{value:{terms:a,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>c.useContext(z),Z=o.div`
|
|
2
2
|
width: 64px;
|
|
3
3
|
height: 64px;
|
|
4
4
|
color: white;
|
package/dist/assets/{00.using-responsive-props-DfMLAuhl.js → 00.using-responsive-props-B53R_GrL.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{A as r}from"./Avatar-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{A as r}from"./Avatar-DUpkb2KC.js";import{ae as p}from"./index-BdKDgH-N.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-Cqk1oqv4.js";import"./componentNames-BSriaIOD.js";import"./constants--ewUoBsO.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";const c=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(a).map(([n,s])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:n})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[s,"px"]})})]},n))})}),o="./web-lib/src/components/Avatar/docs/static/avatar-1.png";function t(n){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(p,{title:"Guides/Responsive Props"}),`
|
|
2
2
|
`,e.jsx(s.h1,{id:"responsive-props",children:"Responsive Props"}),`
|
|
3
3
|
`,e.jsx(s.p,{children:`Some component props optionally accept responsive values for different screen sizes
|
|
4
4
|
based on the global breakpoints:`}),`
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as r}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as k}from"./index-DSz_1G2r.js";import{ae as m}from"./index-
|
|
1
|
+
import{j as r}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as k}from"./index-DSz_1G2r.js";import{ae as m}from"./index-BdKDgH-N.js";import{H as a,B as s}from"./Heading-eTizhp-a.js";import{L as d}from"./LayoutGrid-Bbpoq4GZ.js";import{L as l}from"./LayoutGridItem-yCAtLcT1.js";import"./index-CBqU2yxZ.js";import{t as x}from"./tokens-D22H5zrO.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./classNames-Cqk1oqv4.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./componentNames-BSriaIOD.js";import"./text-accent-Cu7YjM5H.js";import"./text-centered-yu4Ks4Ko.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-qgYNk7GR.js";import"./constants-DYYVurUY.js";import"./constants-mdQROz_Y.js";const o=({inverted:t,textToken:n})=>{const c=x.color.text[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsx("div",{style:{color:`var(--${c[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${t?x.color.background.primaryInverted[1]:x.color.background.primary[1]})`},children:r.jsxs("code",{children:["color.text.",n]})})]},n):null};o.defaultProps={inverted:!1};const e=({inverted:t,bgToken:n})=>{const c=x.color.background[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsxs("div",{style:{background:`var(--${x.color.background[n][1]})`,color:`var(--${t?x.color.text.inverted[1]:x.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",r.jsxs("code",{children:["color.background.",n]})]})]},n):null};e.defaultProps={inverted:!1};const i=({contentToken:t})=>{const n=x.color.border[t];return Array.isArray(n)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:t}),r.jsx("br",{}),r.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",t]})]},t):null};i.defaultProps={};const p=()=>r.jsxs(d,{gap:"xs",columns:2,children:[r.jsx(s,{children:"Token family: action.variant.primary.*"}),r.jsx(s,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),r.jsx(s,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),r.jsx(s,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),r.jsx(s,{variant:"critical",children:"Token family: action.variant.critical.*"}),r.jsx(s,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),r.jsx(s,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),r.jsx(s,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),h=()=>r.jsxs("div",{children:[r.jsx(a,{level:"h1",children:"Semantic token examples"}),r.jsx("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."}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Text tokens"}),r.jsx("br",{}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(o,{textToken:"primary"}),r.jsx(o,{textToken:"secondary"}),r.jsx(o,{textToken:"tertiary"}),r.jsx(o,{textToken:"accentDark"}),r.jsx(o,{textToken:"placeholder"}),r.jsx(o,{textToken:"inverted",inverted:!0}),r.jsx(o,{textToken:"positive"}),r.jsx(o,{textToken:"info"}),r.jsx(o,{textToken:"warning"}),r.jsx(o,{textToken:"critical"})]}),r.jsx("br",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Background tokens"}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(e,{bgToken:"primary"}),r.jsx(e,{bgToken:"secondary"}),r.jsx(e,{bgToken:"tertiary"}),r.jsx(e,{bgToken:"overlay"}),r.jsx(e,{bgToken:"disabled"}),r.jsx(e,{bgToken:"brand"}),r.jsx(e,{bgToken:"brandB2b"}),r.jsx(e,{bgToken:"accentLight"}),r.jsx(e,{bgToken:"accentDark",inverted:!0}),r.jsx(e,{bgToken:"positiveLight"}),r.jsx(e,{bgToken:"positiveDark",inverted:!0}),r.jsx(e,{bgToken:"infoLight"}),r.jsx(e,{bgToken:"infoDark",inverted:!0}),r.jsx(e,{bgToken:"warningLight"}),r.jsx(e,{bgToken:"warningDark",inverted:!0}),r.jsx(e,{bgToken:"criticalLight"}),r.jsx(e,{bgToken:"criticalDark",inverted:!0}),r.jsx(e,{bgToken:"statusOnline"}),r.jsx(e,{bgToken:"statusOffline"}),r.jsx(e,{bgToken:"primaryInverted",inverted:!0}),r.jsx(e,{bgToken:"secondaryInverted",inverted:!0}),r.jsx(e,{bgToken:"tertiaryInverted",inverted:!0})]}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Action"}),r.jsx("br",{}),r.jsx(p,{}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Borders"}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(i,{contentToken:"primary"}),r.jsx(i,{contentToken:"secondary"}),r.jsx(i,{contentToken:"secondary-opacity"}),r.jsx(i,{contentToken:"tertiary"}),r.jsx(i,{contentToken:"disabled"}),r.jsx(i,{contentToken:"brand"}),r.jsx(i,{contentToken:"critical"}),r.jsx(i,{contentToken:"focus"}),r.jsx(i,{contentToken:"positive"})]})]});function j(t){return r.jsxs(r.Fragment,{children:[r.jsx(m,{title:"Guides/Semantic tokens examples"}),`
|
|
2
2
|
`,r.jsx(h,{})]})}function U(t={}){const{wrapper:n}={...k(),...t.components};return n?r.jsx(n,{...t,children:r.jsx(j,{...t})}):j()}export{U as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Assets/Fonts"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"fonts",children:"Fonts"}),`
|
|
3
3
|
`,e.jsxs(n.p,{children:["The optimised assets are available under ",e.jsx(n.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers."]}),`
|
|
4
4
|
`,e.jsxs(n.p,{children:["Refer to ",e.jsx(n.a,{href:"https://preply.atlassian.net/l/cp/0sQoEgGa",rel:"nofollow",children:"Create new universal brand fonts"})," for a detailed breakdown of the formats, optimisations and technical decisions."]}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as r}from"./index-DSz_1G2r.js";import{ae as o}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/SSR/Next.js pages router"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"installation-nextjs-pages-router",children:"Installation: Next.js pages router"}),`
|
|
3
3
|
`,e.jsxs(n.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
|
|
4
4
|
`,e.jsx(n.h2,{id:"packages",children:"Packages"}),`
|
package/dist/assets/{11.languageFont.explorer-wO5p-8ex.js → 11.languageFont.explorer-Ckz-uF4N.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as I}from"./index-DSz_1G2r.js";import{ae as z}from"./index-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as I}from"./index-DSz_1G2r.js";import{ae as z}from"./index-BdKDgH-N.js";import{B as m,H as g}from"./Heading-eTizhp-a.js";import{L as A}from"./LayoutFlex-CI-IyFab.js";import{L as E}from"./LayoutGrid-Bbpoq4GZ.js";import{u as O,T as y}from"./Text-CfFW9YKH.js";import{T}from"./TextField-C2nBL3Da.js";import{R as n,r as u}from"./index-CBqU2yxZ.js";import{R as L}from"./RootProvider-BvHSkgDA.js";import{d as D}from"./styled-components.browser.esm-BUFlhth0.js";import{t as c}from"./tokens-D22H5zrO.js";import{u as V}from"./useTheme-ByES4oDS.js";import{H as S,b}from"./options-Cmszy4eB.js";import{c as B}from"./classNames-Cqk1oqv4.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./render-icon-C9YZCLtv.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./componentNames-BSriaIOD.js";import"./text-accent-Cu7YjM5H.js";import"./text-centered-yu4Ks4Ko.js";import"./layout-relative-qgYNk7GR.js";import"./constants-DYYVurUY.js";import"./breakpoints-BfMlrtxE.js";import"./constants-mdQROz_Y.js";import"./constants-DL6gdbsq.js";import"./getInputProps-CQF_KcrT.js";import"./useForcedRef-CC5bJQVj.js";import"./useTextField-IMWr4_ZB.js";import"./constants-BaXVdZRV.js";const U=D.td`
|
|
2
2
|
width: ${({width:a})=>a?`${a}px`:"auto"};
|
|
3
3
|
padding-top: 0;
|
|
4
4
|
padding-right: ${({horizontalSpace:a})=>a?"40px":"20px"};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function o(r){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Guides/Installation/SSR/Next.js app router"}),`
|
|
2
2
|
`,e.jsx(t.h1,{id:"installation-nextjs-app-router",children:"Installation: Next.js app router"}),`
|
|
3
3
|
`,e.jsxs(t.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(t.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
|
|
4
4
|
`,e.jsx(t.h2,{id:"packages",children:"Packages"}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as o}from"./index-DSz_1G2r.js";import{ae as r}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function i(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Installation/Libraries"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"installation-libraries",children:"Installation: Libraries"}),`
|
|
3
3
|
`,e.jsxs(n.p,{children:["This guide applies to libraries consumed in Preply applications, and assumes these applications are already integrated according to the steps outlined in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
|
|
4
4
|
`,e.jsx(n.h2,{id:"install-packages",children:"Install Packages"}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{ae as h}from"./index-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as i}from"./index-DSz_1G2r.js";import{ae as h}from"./index-BdKDgH-N.js";import{r as e}from"./index-CBqU2yxZ.js";import{a as f}from"./StorybookGlobalStyle-C718IdTK.js";import{d as c}from"./styled-components.browser.esm-BUFlhth0.js";import{I as r}from"./Icon-BEGCR1FC.js";import{L as R}from"./LayoutFlex-CI-IyFab.js";import{a as y,F as u}from"./User-louGEvpx.js";import{F as E}from"./LibraryExplore-Doyt8zmK.js";import{F as Z}from"./TokyoUIFav-Dzux4Kv4.js";import{F as x}from"./TokyoUIInfo-BMIBmNIR.js";import{F as b}from"./TokyoUINotesWithPad-uVRz-RMx.js";import{F as S}from"./TokyoUIStudy-BP_gcixp.js";import{F as H}from"./TokyoUITag-CQmRJtP0.js";import{g as v}from"./getTokenVar-CEGfaPeF.js";import{c as s}from"./tokens-D22H5zrO.js";import{o as k}from"./mixins-DZk1Zeoo.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./text-accent-Cu7YjM5H.js";import"./classNames-Cqk1oqv4.js";import"./render-icon-C9YZCLtv.js";import"./componentNames-BSriaIOD.js";import"./layout-relative-qgYNk7GR.js";import"./constants-DYYVurUY.js";import"./constants-mdQROz_Y.js";const p=()=>e.useContext(f),M=c.form`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: flex-start;
|
|
4
4
|
gap: 20px;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-
|
|
1
|
+
import{j as o}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as n}from"./index-DSz_1G2r.js";import{ae as s}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function t(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Installation/Storybook"}),`
|
|
2
2
|
`,o.jsx(e.h1,{id:"installation-storybook",children:"Installation: Storybook"}),`
|
|
3
3
|
`,o.jsxs(e.p,{children:["This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the ",o.jsx(e.a,{href:"/story/guides-installation-libraries--page",children:"Installation: Libaries"})," guide."]}),`
|
|
4
4
|
`,o.jsx(e.h2,{id:"packages",children:"Packages"}),`
|
package/dist/assets/{40.illustrations.explorer-CkyZVNPW.js → 40.illustrations.explorer-RiA5UJEs.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as l}from"./index-DSz_1G2r.js";import{ae as a}from"./index-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as l}from"./index-DSz_1G2r.js";import{ae as a}from"./index-BdKDgH-N.js";import{L as e}from"./LayoutGrid-Bbpoq4GZ.js";import{d as c}from"./styled-components.browser.esm-BUFlhth0.js";import{g as i}from"./getTokenVar-CEGfaPeF.js";import{s as n,c as p}from"./tokens-D22H5zrO.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./classNames-Cqk1oqv4.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-qgYNk7GR.js";import"./constants-DYYVurUY.js";import"./componentNames-BSriaIOD.js";import"./constants-mdQROz_Y.js";const u=["https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg","https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg","https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bar-gaph.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg","https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg","https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg","https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg","https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg","https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg","https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg","https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg","https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg","https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg","https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg","https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg","https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg","https://static.preply.com/ds/illustrations/tokyo-ui/map.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg","https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg","https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg","https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/present.svg","https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg","https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg","https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg","https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg","https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg","https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg","https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg","https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg","https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg"],y=c.div`
|
|
2
2
|
padding: ${i(n[12])};
|
|
3
3
|
-webkit-background-size: 50px 50px;
|
|
4
4
|
-moz-background-size: 50px 50px;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{useMDXComponents as t}from"./index-DSz_1G2r.js";import{ae as i}from"./index-BdKDgH-N.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";function r(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Installation/Advanced"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"installation-advanced",children:"Installation: Advanced"}),`
|
|
3
3
|
`,e.jsxs(o.p,{children:["This page is about rolling out your own alternative to ",e.jsx(o.code,{children:"<RootProvider/>"})," (advanced usage)."]}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["If you are looking for how to install, refer to the ",e.jsx(o.a,{href:"/story/guides-installation-applications--page",children:"installation guides"})," instead."]}),`
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{m as l,s as m,b as z,g as x,A as f}from"./classNames-Cqk1oqv4.js";import{w as s}from"./componentNames-BSriaIOD.js";import{A as n}from"./constants--ewUoBsO.js";const o="_Avatar_1fxag_4",u={Avatar:o,"Avatar--size-2xs":"_Avatar--size-2xs_1fxag_12","Avatar--size-xs":"_Avatar--size-xs_1fxag_16","Avatar--size-s":"_Avatar--size-s_1fxag_20","Avatar--size-m":"_Avatar--size-m_1fxag_24","Avatar--size-l":"_Avatar--size-l_1fxag_28","Avatar--size-xl":"_Avatar--size-xl_1fxag_32","Avatar--size-24":"_Avatar--size-24_1fxag_36","Avatar--size-32":"_Avatar--size-32_1fxag_40","Avatar--size-48":"_Avatar--size-48_1fxag_44","Avatar--size-64":"_Avatar--size-64_1fxag_48","Avatar--size-96":"_Avatar--size-96_1fxag_52","Avatar--size-160":"_Avatar--size-160_1fxag_56","Avatar--narrow-l--size-2xs":"_Avatar--narrow-l--size-2xs_1fxag_61","Avatar--narrow-l--size-xs":"_Avatar--narrow-l--size-xs_1fxag_65","Avatar--narrow-l--size-s":"_Avatar--narrow-l--size-s_1fxag_69","Avatar--narrow-l--size-m":"_Avatar--narrow-l--size-m_1fxag_73","Avatar--narrow-l--size-l":"_Avatar--narrow-l--size-l_1fxag_77","Avatar--narrow-l--size-xl":"_Avatar--narrow-l--size-xl_1fxag_81","Avatar--narrow-l--size-24":"_Avatar--narrow-l--size-24_1fxag_85","Avatar--narrow-l--size-32":"_Avatar--narrow-l--size-32_1fxag_89","Avatar--narrow-l--size-48":"_Avatar--narrow-l--size-48_1fxag_93","Avatar--narrow-l--size-64":"_Avatar--narrow-l--size-64_1fxag_97","Avatar--narrow-l--size-96":"_Avatar--narrow-l--size-96_1fxag_101","Avatar--narrow-l--size-160":"_Avatar--narrow-l--size-160_1fxag_105","Avatar--medium-s--size-2xs":"_Avatar--medium-s--size-2xs_1fxag_111","Avatar--medium-s--size-xs":"_Avatar--medium-s--size-xs_1fxag_115","Avatar--medium-s--size-s":"_Avatar--medium-s--size-s_1fxag_119","Avatar--medium-s--size-m":"_Avatar--medium-s--size-m_1fxag_123","Avatar--medium-s--size-l":"_Avatar--medium-s--size-l_1fxag_127","Avatar--medium-s--size-xl":"_Avatar--medium-s--size-xl_1fxag_131","Avatar--medium-s--size-24":"_Avatar--medium-s--size-24_1fxag_135","Avatar--medium-s--size-32":"_Avatar--medium-s--size-32_1fxag_139","Avatar--medium-s--size-48":"_Avatar--medium-s--size-48_1fxag_143","Avatar--medium-s--size-64":"_Avatar--medium-s--size-64_1fxag_147","Avatar--medium-s--size-96":"_Avatar--medium-s--size-96_1fxag_151","Avatar--medium-s--size-160":"_Avatar--medium-s--size-160_1fxag_155","Avatar--medium-l--size-2xs":"_Avatar--medium-l--size-2xs_1fxag_161","Avatar--medium-l--size-xs":"_Avatar--medium-l--size-xs_1fxag_165","Avatar--medium-l--size-s":"_Avatar--medium-l--size-s_1fxag_169","Avatar--medium-l--size-m":"_Avatar--medium-l--size-m_1fxag_173","Avatar--medium-l--size-l":"_Avatar--medium-l--size-l_1fxag_177","Avatar--medium-l--size-xl":"_Avatar--medium-l--size-xl_1fxag_181","Avatar--medium-l--size-24":"_Avatar--medium-l--size-24_1fxag_185","Avatar--medium-l--size-32":"_Avatar--medium-l--size-32_1fxag_189","Avatar--medium-l--size-48":"_Avatar--medium-l--size-48_1fxag_193","Avatar--medium-l--size-64":"_Avatar--medium-l--size-64_1fxag_197","Avatar--medium-l--size-96":"_Avatar--medium-l--size-96_1fxag_201","Avatar--medium-l--size-160":"_Avatar--medium-l--size-160_1fxag_205","Avatar--wide-s--size-2xs":"_Avatar--wide-s--size-2xs_1fxag_211","Avatar--wide-s--size-xs":"_Avatar--wide-s--size-xs_1fxag_215","Avatar--wide-s--size-s":"_Avatar--wide-s--size-s_1fxag_219","Avatar--wide-s--size-m":"_Avatar--wide-s--size-m_1fxag_223","Avatar--wide-s--size-l":"_Avatar--wide-s--size-l_1fxag_227","Avatar--wide-s--size-xl":"_Avatar--wide-s--size-xl_1fxag_231","Avatar--wide-s--size-24":"_Avatar--wide-s--size-24_1fxag_235","Avatar--wide-s--size-32":"_Avatar--wide-s--size-32_1fxag_239","Avatar--wide-s--size-48":"_Avatar--wide-s--size-48_1fxag_243","Avatar--wide-s--size-64":"_Avatar--wide-s--size-64_1fxag_247","Avatar--wide-s--size-96":"_Avatar--wide-s--size-96_1fxag_251","Avatar--wide-s--size-160":"_Avatar--wide-s--size-160_1fxag_255","Avatar--wide-l--size-2xs":"_Avatar--wide-l--size-2xs_1fxag_261","Avatar--wide-l--size-xs":"_Avatar--wide-l--size-xs_1fxag_265","Avatar--wide-l--size-s":"_Avatar--wide-l--size-s_1fxag_269","Avatar--wide-l--size-m":"_Avatar--wide-l--size-m_1fxag_273","Avatar--wide-l--size-l":"_Avatar--wide-l--size-l_1fxag_277","Avatar--wide-l--size-xl":"_Avatar--wide-l--size-xl_1fxag_281","Avatar--wide-l--size-24":"_Avatar--wide-l--size-24_1fxag_285","Avatar--wide-l--size-32":"_Avatar--wide-l--size-32_1fxag_289","Avatar--wide-l--size-48":"_Avatar--wide-l--size-48_1fxag_293","Avatar--wide-l--size-64":"_Avatar--wide-l--size-64_1fxag_297","Avatar--wide-l--size-96":"_Avatar--wide-l--size-96_1fxag_301","Avatar--wide-l--size-160":"_Avatar--wide-l--size-160_1fxag_305","Avatar--round":"_Avatar--round_1fxag_310"},i=({size:a=f,round:r,src:t,alt:_="",dataset:A})=>{const v=r??!0,d={className:l(u,s.Avatar,[m("size",a),z("round",void 0,v)]).join(" "),...x(A,{preplyDsComponent:s.Avatar})};return e.jsx("picture",{...d,children:e.jsx("img",{src:t||n,alt:_})})};try{i.displayName="Avatar",i.__docgenInfo={description:"",displayName:"Avatar",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"Responsive<AvatarSize> | undefined"}},round:{defaultValue:null,description:"@deprecated",name:"round",required:!1,type:{name:"boolean | undefined"}},src:{defaultValue:null,description:`The avatar image URL.
|
|
2
|
+
If not provided, the default placeholder image is used instead.`,name:"src",required:!1,type:{name:"string | undefined"}},alt:{defaultValue:{value:""},description:`A description of the image.
|
|
3
|
+
This is recommended for accessibility purposes, specifically for users
|
|
4
|
+
of screen readers.
|
|
5
|
+
@example <Avatar src={...} alt="Foobar's profile" />`,name:"alt",required:!1,type:{name:"string | undefined"}},dataset:{defaultValue:null,description:`Use this to set data attributes on the DOM element for the purpose of
|
|
6
|
+
e2e tests or integrating with external libraries.`,name:"dataset",required:!1,type:{name:"Dataset | undefined"}}}}}catch{}export{i as A};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Avatar_1fxag_4{display:inline-block}._Avatar_1fxag_4 img{vertical-align:bottom;object-fit:cover;border-radius:var(--dad9ec)}._Avatar--size-2xs_1fxag_12 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--size-xs_1fxag_16 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--size-s_1fxag_20 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--size-m_1fxag_24 img{width:var(--b51334);height:var(--b51334)}._Avatar--size-l_1fxag_28 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--size-xl_1fxag_32 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--size-24_1fxag_36 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--size-32_1fxag_40 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--size-48_1fxag_44 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--size-64_1fxag_48 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--size-96_1fxag_52 img{width:var(--796da2);height:var(--796da2)}._Avatar--size-160_1fxag_56 img{width:var(--329ba7);height:var(--329ba7)}@media (min-width: 400px){._Avatar--narrow-l--size-2xs_1fxag_61 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--narrow-l--size-xs_1fxag_65 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--narrow-l--size-s_1fxag_69 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--narrow-l--size-m_1fxag_73 img{width:var(--b51334);height:var(--b51334)}._Avatar--narrow-l--size-l_1fxag_77 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--narrow-l--size-xl_1fxag_81 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--narrow-l--size-24_1fxag_85 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--narrow-l--size-32_1fxag_89 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--narrow-l--size-48_1fxag_93 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--narrow-l--size-64_1fxag_97 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--narrow-l--size-96_1fxag_101 img{width:var(--796da2);height:var(--796da2)}._Avatar--narrow-l--size-160_1fxag_105 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 700px){._Avatar--medium-s--size-2xs_1fxag_111 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--medium-s--size-xs_1fxag_115 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--medium-s--size-s_1fxag_119 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--medium-s--size-m_1fxag_123 img{width:var(--b51334);height:var(--b51334)}._Avatar--medium-s--size-l_1fxag_127 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--medium-s--size-xl_1fxag_131 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--medium-s--size-24_1fxag_135 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--medium-s--size-32_1fxag_139 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--medium-s--size-48_1fxag_143 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--medium-s--size-64_1fxag_147 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--medium-s--size-96_1fxag_151 img{width:var(--796da2);height:var(--796da2)}._Avatar--medium-s--size-160_1fxag_155 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 880px){._Avatar--medium-l--size-2xs_1fxag_161 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--medium-l--size-xs_1fxag_165 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--medium-l--size-s_1fxag_169 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--medium-l--size-m_1fxag_173 img{width:var(--b51334);height:var(--b51334)}._Avatar--medium-l--size-l_1fxag_177 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--medium-l--size-xl_1fxag_181 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--medium-l--size-24_1fxag_185 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--medium-l--size-32_1fxag_189 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--medium-l--size-48_1fxag_193 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--medium-l--size-64_1fxag_197 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--medium-l--size-96_1fxag_201 img{width:var(--796da2);height:var(--796da2)}._Avatar--medium-l--size-160_1fxag_205 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1200px){._Avatar--wide-s--size-2xs_1fxag_211 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--wide-s--size-xs_1fxag_215 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--wide-s--size-s_1fxag_219 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--wide-s--size-m_1fxag_223 img{width:var(--b51334);height:var(--b51334)}._Avatar--wide-s--size-l_1fxag_227 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--wide-s--size-xl_1fxag_231 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--wide-s--size-24_1fxag_235 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--wide-s--size-32_1fxag_239 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--wide-s--size-48_1fxag_243 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--wide-s--size-64_1fxag_247 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--wide-s--size-96_1fxag_251 img{width:var(--796da2);height:var(--796da2)}._Avatar--wide-s--size-160_1fxag_255 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1900px){._Avatar--wide-l--size-2xs_1fxag_261 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--wide-l--size-xs_1fxag_265 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--wide-l--size-s_1fxag_269 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--wide-l--size-m_1fxag_273 img{width:var(--b51334);height:var(--b51334)}._Avatar--wide-l--size-l_1fxag_277 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--wide-l--size-xl_1fxag_281 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--wide-l--size-24_1fxag_285 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--wide-l--size-32_1fxag_289 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--wide-l--size-48_1fxag_293 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--wide-l--size-64_1fxag_297 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--wide-l--size-96_1fxag_301 img{width:var(--796da2);height:var(--796da2)}._Avatar--wide-l--size-160_1fxag_305 img{width:var(--329ba7);height:var(--329ba7)}}._Avatar--round_1fxag_310 img{border-radius:var(--8517a6)}._Avatar_1fxag_4 img{border-style:solid;border-width:var(--c4d145);border-color:var(--54e6b5)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Avatar_1fxag_4{display:inline-block}._Avatar_1fxag_4 img{vertical-align:bottom;-o-object-fit:cover;object-fit:cover;border-radius:var(--dad9ec)}._Avatar--size-2xs_1fxag_12 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--size-xs_1fxag_16 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--size-s_1fxag_20 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--size-m_1fxag_24 img{width:var(--b51334);height:var(--b51334)}._Avatar--size-l_1fxag_28 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--size-xl_1fxag_32 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--size-24_1fxag_36 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--size-32_1fxag_40 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--size-48_1fxag_44 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--size-64_1fxag_48 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--size-96_1fxag_52 img{width:var(--796da2);height:var(--796da2)}._Avatar--size-160_1fxag_56 img{width:var(--329ba7);height:var(--329ba7)}@media (min-width: 400px){._Avatar--narrow-l--size-2xs_1fxag_61 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--narrow-l--size-xs_1fxag_65 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--narrow-l--size-s_1fxag_69 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--narrow-l--size-m_1fxag_73 img{width:var(--b51334);height:var(--b51334)}._Avatar--narrow-l--size-l_1fxag_77 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--narrow-l--size-xl_1fxag_81 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--narrow-l--size-24_1fxag_85 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--narrow-l--size-32_1fxag_89 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--narrow-l--size-48_1fxag_93 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--narrow-l--size-64_1fxag_97 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--narrow-l--size-96_1fxag_101 img{width:var(--796da2);height:var(--796da2)}._Avatar--narrow-l--size-160_1fxag_105 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 700px){._Avatar--medium-s--size-2xs_1fxag_111 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--medium-s--size-xs_1fxag_115 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--medium-s--size-s_1fxag_119 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--medium-s--size-m_1fxag_123 img{width:var(--b51334);height:var(--b51334)}._Avatar--medium-s--size-l_1fxag_127 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--medium-s--size-xl_1fxag_131 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--medium-s--size-24_1fxag_135 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--medium-s--size-32_1fxag_139 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--medium-s--size-48_1fxag_143 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--medium-s--size-64_1fxag_147 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--medium-s--size-96_1fxag_151 img{width:var(--796da2);height:var(--796da2)}._Avatar--medium-s--size-160_1fxag_155 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 880px){._Avatar--medium-l--size-2xs_1fxag_161 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--medium-l--size-xs_1fxag_165 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--medium-l--size-s_1fxag_169 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--medium-l--size-m_1fxag_173 img{width:var(--b51334);height:var(--b51334)}._Avatar--medium-l--size-l_1fxag_177 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--medium-l--size-xl_1fxag_181 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--medium-l--size-24_1fxag_185 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--medium-l--size-32_1fxag_189 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--medium-l--size-48_1fxag_193 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--medium-l--size-64_1fxag_197 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--medium-l--size-96_1fxag_201 img{width:var(--796da2);height:var(--796da2)}._Avatar--medium-l--size-160_1fxag_205 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1200px){._Avatar--wide-s--size-2xs_1fxag_211 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--wide-s--size-xs_1fxag_215 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--wide-s--size-s_1fxag_219 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--wide-s--size-m_1fxag_223 img{width:var(--b51334);height:var(--b51334)}._Avatar--wide-s--size-l_1fxag_227 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--wide-s--size-xl_1fxag_231 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--wide-s--size-24_1fxag_235 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--wide-s--size-32_1fxag_239 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--wide-s--size-48_1fxag_243 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--wide-s--size-64_1fxag_247 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--wide-s--size-96_1fxag_251 img{width:var(--796da2);height:var(--796da2)}._Avatar--wide-s--size-160_1fxag_255 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1900px){._Avatar--wide-l--size-2xs_1fxag_261 img{width:var(--d51f41);height:var(--d51f41)}._Avatar--wide-l--size-xs_1fxag_265 img{width:var(--cfdb4f);height:var(--cfdb4f)}._Avatar--wide-l--size-s_1fxag_269 img{width:var(--2dafbf);height:var(--2dafbf)}._Avatar--wide-l--size-m_1fxag_273 img{width:var(--b51334);height:var(--b51334)}._Avatar--wide-l--size-l_1fxag_277 img{width:var(--d318a5);height:var(--d318a5)}._Avatar--wide-l--size-xl_1fxag_281 img{width:var(--6eb1c7);height:var(--6eb1c7)}._Avatar--wide-l--size-24_1fxag_285 img{width:var(--86aa8e);height:var(--86aa8e)}._Avatar--wide-l--size-32_1fxag_289 img{width:var(--32bbec);height:var(--32bbec)}._Avatar--wide-l--size-48_1fxag_293 img{width:var(--950ab5);height:var(--950ab5)}._Avatar--wide-l--size-64_1fxag_297 img{width:var(--cc5dc7);height:var(--cc5dc7)}._Avatar--wide-l--size-96_1fxag_301 img{width:var(--796da2);height:var(--796da2)}._Avatar--wide-l--size-160_1fxag_305 img{width:var(--329ba7);height:var(--329ba7)}}._Avatar--round_1fxag_310 img{border-radius:var(--8517a6)}._Avatar_1fxag_4 img{border-style:solid;border-width:var(--c4d145);border-color:var(--54e6b5)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as s}from"./jsx-runtime-CKrituN3.js";import{m as z,s as m,b as x,g as l,A as d}from"./classNames-Cqk1oqv4.js";import{w as e}from"./componentNames-BSriaIOD.js";import{A as f}from"./constants--ewUoBsO.js";const g="_Avatar_1fxag_4",w={Avatar:g,"Avatar--size-2xs":"_Avatar--size-2xs_1fxag_12","Avatar--size-xs":"_Avatar--size-xs_1fxag_16","Avatar--size-s":"_Avatar--size-s_1fxag_20","Avatar--size-m":"_Avatar--size-m_1fxag_24","Avatar--size-l":"_Avatar--size-l_1fxag_28","Avatar--size-xl":"_Avatar--size-xl_1fxag_32","Avatar--size-24":"_Avatar--size-24_1fxag_36","Avatar--size-32":"_Avatar--size-32_1fxag_40","Avatar--size-48":"_Avatar--size-48_1fxag_44","Avatar--size-64":"_Avatar--size-64_1fxag_48","Avatar--size-96":"_Avatar--size-96_1fxag_52","Avatar--size-160":"_Avatar--size-160_1fxag_56","Avatar--narrow-l--size-2xs":"_Avatar--narrow-l--size-2xs_1fxag_61","Avatar--narrow-l--size-xs":"_Avatar--narrow-l--size-xs_1fxag_65","Avatar--narrow-l--size-s":"_Avatar--narrow-l--size-s_1fxag_69","Avatar--narrow-l--size-m":"_Avatar--narrow-l--size-m_1fxag_73","Avatar--narrow-l--size-l":"_Avatar--narrow-l--size-l_1fxag_77","Avatar--narrow-l--size-xl":"_Avatar--narrow-l--size-xl_1fxag_81","Avatar--narrow-l--size-24":"_Avatar--narrow-l--size-24_1fxag_85","Avatar--narrow-l--size-32":"_Avatar--narrow-l--size-32_1fxag_89","Avatar--narrow-l--size-48":"_Avatar--narrow-l--size-48_1fxag_93","Avatar--narrow-l--size-64":"_Avatar--narrow-l--size-64_1fxag_97","Avatar--narrow-l--size-96":"_Avatar--narrow-l--size-96_1fxag_101","Avatar--narrow-l--size-160":"_Avatar--narrow-l--size-160_1fxag_105","Avatar--medium-s--size-2xs":"_Avatar--medium-s--size-2xs_1fxag_111","Avatar--medium-s--size-xs":"_Avatar--medium-s--size-xs_1fxag_115","Avatar--medium-s--size-s":"_Avatar--medium-s--size-s_1fxag_119","Avatar--medium-s--size-m":"_Avatar--medium-s--size-m_1fxag_123","Avatar--medium-s--size-l":"_Avatar--medium-s--size-l_1fxag_127","Avatar--medium-s--size-xl":"_Avatar--medium-s--size-xl_1fxag_131","Avatar--medium-s--size-24":"_Avatar--medium-s--size-24_1fxag_135","Avatar--medium-s--size-32":"_Avatar--medium-s--size-32_1fxag_139","Avatar--medium-s--size-48":"_Avatar--medium-s--size-48_1fxag_143","Avatar--medium-s--size-64":"_Avatar--medium-s--size-64_1fxag_147","Avatar--medium-s--size-96":"_Avatar--medium-s--size-96_1fxag_151","Avatar--medium-s--size-160":"_Avatar--medium-s--size-160_1fxag_155","Avatar--medium-l--size-2xs":"_Avatar--medium-l--size-2xs_1fxag_161","Avatar--medium-l--size-xs":"_Avatar--medium-l--size-xs_1fxag_165","Avatar--medium-l--size-s":"_Avatar--medium-l--size-s_1fxag_169","Avatar--medium-l--size-m":"_Avatar--medium-l--size-m_1fxag_173","Avatar--medium-l--size-l":"_Avatar--medium-l--size-l_1fxag_177","Avatar--medium-l--size-xl":"_Avatar--medium-l--size-xl_1fxag_181","Avatar--medium-l--size-24":"_Avatar--medium-l--size-24_1fxag_185","Avatar--medium-l--size-32":"_Avatar--medium-l--size-32_1fxag_189","Avatar--medium-l--size-48":"_Avatar--medium-l--size-48_1fxag_193","Avatar--medium-l--size-64":"_Avatar--medium-l--size-64_1fxag_197","Avatar--medium-l--size-96":"_Avatar--medium-l--size-96_1fxag_201","Avatar--medium-l--size-160":"_Avatar--medium-l--size-160_1fxag_205","Avatar--wide-s--size-2xs":"_Avatar--wide-s--size-2xs_1fxag_211","Avatar--wide-s--size-xs":"_Avatar--wide-s--size-xs_1fxag_215","Avatar--wide-s--size-s":"_Avatar--wide-s--size-s_1fxag_219","Avatar--wide-s--size-m":"_Avatar--wide-s--size-m_1fxag_223","Avatar--wide-s--size-l":"_Avatar--wide-s--size-l_1fxag_227","Avatar--wide-s--size-xl":"_Avatar--wide-s--size-xl_1fxag_231","Avatar--wide-s--size-24":"_Avatar--wide-s--size-24_1fxag_235","Avatar--wide-s--size-32":"_Avatar--wide-s--size-32_1fxag_239","Avatar--wide-s--size-48":"_Avatar--wide-s--size-48_1fxag_243","Avatar--wide-s--size-64":"_Avatar--wide-s--size-64_1fxag_247","Avatar--wide-s--size-96":"_Avatar--wide-s--size-96_1fxag_251","Avatar--wide-s--size-160":"_Avatar--wide-s--size-160_1fxag_255","Avatar--wide-l--size-2xs":"_Avatar--wide-l--size-2xs_1fxag_261","Avatar--wide-l--size-xs":"_Avatar--wide-l--size-xs_1fxag_265","Avatar--wide-l--size-s":"_Avatar--wide-l--size-s_1fxag_269","Avatar--wide-l--size-m":"_Avatar--wide-l--size-m_1fxag_273","Avatar--wide-l--size-l":"_Avatar--wide-l--size-l_1fxag_277","Avatar--wide-l--size-xl":"_Avatar--wide-l--size-xl_1fxag_281","Avatar--wide-l--size-24":"_Avatar--wide-l--size-24_1fxag_285","Avatar--wide-l--size-32":"_Avatar--wide-l--size-32_1fxag_289","Avatar--wide-l--size-48":"_Avatar--wide-l--size-48_1fxag_293","Avatar--wide-l--size-64":"_Avatar--wide-l--size-64_1fxag_297","Avatar--wide-l--size-96":"_Avatar--wide-l--size-96_1fxag_301","Avatar--wide-l--size-160":"_Avatar--wide-l--size-160_1fxag_305","Avatar--round":"_Avatar--round_1fxag_310"},N=({size:i=d,round:a,src:_,alt:r="",dataset:t})=>{const A=a??!0,v={className:z(w,e.Avatar,[m("size",i),x("round",void 0,A)]).join(" "),...l(t,{preplyDsComponent:e.Avatar})};return s.jsx("picture",{...v,children:s.jsx("img",{src:_||f,alt:r})})};export{N as A};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-CKrituN3.js";import{A as a}from"./Avatar-
|
|
1
|
+
import{j as s}from"./jsx-runtime-CKrituN3.js";import{A as a}from"./Avatar-Bf-ZQ5SI.js";import{S as i}from"./StoryContextDSWeb-CViICLux.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-Cqk1oqv4.js";import"./componentNames-BSriaIOD.js";import"./constants--ewUoBsO.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-BvHSkgDA.js";import"./useTheme-ByES4oDS.js";import"./constants-mdQROz_Y.js";const y={title:"components/Avatar",component:a,decorators:[c=>s.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:s.jsx(i,{theme:"tokyo-ui",children:c()})})]},t=()=>s.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"end"},children:[s.jsx(a,{size:"160"}),s.jsx(a,{src:"./web-lib/src/components/Avatar/docs/static/avatar-1.png",size:"96"}),s.jsx(a,{src:"./web-lib/src/components/Avatar/docs/static/avatar-2.png",size:"64"}),s.jsx(a,{src:"./web-lib/src/components/Avatar/docs/static/avatar-3.png",size:"48"}),s.jsx(a,{src:"./web-lib/src/components/Avatar/docs/static/avatar-4.png",size:"32"}),s.jsx(a,{src:"./web-lib/src/components/Avatar/docs/static/avatar-5.png",size:"24"})]});var r,e,o;t.parameters={...t.parameters,docs:{...(r=t.parameters)==null?void 0:r.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
gap: '8px',
|
|
4
4
|
alignItems: 'end'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._AvatarWithStatus_182ku_3{display:inline-block;position:relative}._AvatarWithStatus--indicator_182ku_7{position:absolute;border-style:solid;border-radius:var(--0cf20e);border-width:var(--4a76d7);border-color:var(--e5a39b);background-color:var(--a95a51)}._AvatarWithStatus--online_182ku_15 ._AvatarWithStatus--indicator_182ku_7{background-color:var(--62b71e)}._AvatarWithStatus--size-2xs_182ku_18 ._AvatarWithStatus--indicator_182ku_7{width:var(--1cea5a);height:var(--1cea5a);right:var(--4b2086);bottom:var(--4b2086)}._AvatarWithStatus--size-xs_182ku_24 ._AvatarWithStatus--indicator_182ku_7{width:var(--540610);height:var(--540610);right:var(--20c0b1);bottom:var(--20c0b1)}._AvatarWithStatus--size-m_182ku_30 ._AvatarWithStatus--indicator_182ku_7{width:var(--8f1e94);height:var(--8f1e94);right:var(--705050);bottom:var(--705050)}._AvatarWithStatus--size-xl_182ku_36 ._AvatarWithStatus--indicator_182ku_7{width:var(--bdf712);height:var(--bdf712);right:var(--3b13f1);bottom:var(--3b13f1)}._AvatarWithStatus--size-64_182ku_42 ._AvatarWithStatus--indicator_182ku_7{width:var(--7d9a55);height:var(--7d9a55);right:var(--3e174a);bottom:var(--3e174a)}._AvatarWithStatus--size-96_182ku_48 ._AvatarWithStatus--indicator_182ku_7{width:var(--7d3ab7);height:var(--7d3ab7);right:var(--bd3f63);bottom:var(--bd3f63)}._AvatarWithStatus--size-160_182ku_54 ._AvatarWithStatus--indicator_182ku_7{width:var(--523f7d);height:var(--523f7d);right:var(--23067e);bottom:var(--23067e)}
|
package/dist/assets/{AvatarWithStatus.stories-BJ-eSXmN.js → AvatarWithStatus.stories-BeLSoM6l.js}
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{A}from"./Avatar-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{A}from"./Avatar-Bf-ZQ5SI.js";import{m as S,b as f,s as W,d as x,g as y,A as z}from"./classNames-Cqk1oqv4.js";import{w as i}from"./componentNames-BSriaIOD.js";import{S as g}from"./StoryContextDSWeb-CViICLux.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./constants--ewUoBsO.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-BvHSkgDA.js";import"./useTheme-ByES4oDS.js";import"./constants-mdQROz_Y.js";const j="_AvatarWithStatus_182ku_3",o={AvatarWithStatus:j,"AvatarWithStatus--indicator":"_AvatarWithStatus--indicator_182ku_7","AvatarWithStatus--online":"_AvatarWithStatus--online_182ku_15","AvatarWithStatus--size-2xs":"_AvatarWithStatus--size-2xs_182ku_18","AvatarWithStatus--size-xs":"_AvatarWithStatus--size-xs_182ku_24","AvatarWithStatus--size-m":"_AvatarWithStatus--size-m_182ku_30","AvatarWithStatus--size-xl":"_AvatarWithStatus--size-xl_182ku_36","AvatarWithStatus--size-64":"_AvatarWithStatus--size-64_182ku_42","AvatarWithStatus--size-96":"_AvatarWithStatus--size-96_182ku_48","AvatarWithStatus--size-160":"_AvatarWithStatus--size-160_182ku_54"},e=({online:s=!1,size:r=z,dataset:m,...c})=>{const h=S(o,i.AvatarWithStatus,[f("online",void 0,s),W("size",r)]),v=[...x(o,i.AvatarWithStatus,["indicator"])],_={className:h.join(" "),...y(m,{preplyDsComponent:i.AvatarWithStatus})};return t.jsxs("div",{..._,children:[t.jsx("span",{className:v.join(" ")}),t.jsx("div",{children:t.jsx(A,{...c,size:r})})]})};try{e.displayName="AvatarWithStatus",e.__docgenInfo={description:"",displayName:"AvatarWithStatus",props:{src:{defaultValue:null,description:`The avatar image URL.
|
|
2
2
|
If not provided, the default placeholder image is used instead.`,name:"src",required:!1,type:{name:"string | undefined"}},alt:{defaultValue:null,description:`A description of the image.
|
|
3
3
|
This is recommended for accessibility purposes, specifically for users
|
|
4
4
|
of screen readers.
|
|
5
5
|
@example <Avatar src={...} alt="Foobar's profile" />`,name:"alt",required:!1,type:{name:"string | undefined"}},dataset:{defaultValue:null,description:`Use this to set data attributes on the DOM element for the purpose of
|
|
6
|
-
e2e tests or integrating with external libraries.`,name:"dataset",required:!1,type:{name:"Dataset | undefined"}},online:{defaultValue:{value:"false"},description:"Controls the status of the visual indicator.",name:"online",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"AvatarWithStatusSize | undefined"}}}}}catch{}const
|
|
6
|
+
e2e tests or integrating with external libraries.`,name:"dataset",required:!1,type:{name:"Dataset | undefined"}},online:{defaultValue:{value:"false"},description:"Controls the status of the visual indicator.",name:"online",required:!1,type:{name:"boolean"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"AvatarWithStatusSize | undefined"}}}}}catch{}const U={title:"components/AvatarWithStatus",component:e,decorators:[s=>t.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:t.jsx(g,{theme:"tokyo-ui",children:s()})})]},a=()=>t.jsxs("div",{style:{display:"flex",gap:"8px"},children:[t.jsx(e,{size:"64",online:!0}),t.jsx(e,{size:"64",online:!1})]});var n,u,l,d,p;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`() => <div style={{
|
|
7
7
|
display: 'flex',
|
|
8
8
|
gap: '8px'
|
|
9
9
|
}}>
|
|
10
10
|
<AvatarWithStatus size="64" online />
|
|
11
11
|
<AvatarWithStatus size="64" online={false} />
|
|
12
|
-
</div>`,...(
|
|
13
|
-
connection status indicator.`,...(
|
|
12
|
+
</div>`,...(l=(u=a.parameters)==null?void 0:u.docs)==null?void 0:l.source},description:{story:`This component augments [Avatar](/docs/components-avatar--docs) to add a
|
|
13
|
+
connection status indicator.`,...(p=(d=a.parameters)==null?void 0:d.docs)==null?void 0:p.description}}};const F=["Statuses"];export{a as Statuses,F as __namedExportsOrder,U as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._badge_q6jfn_2{display:inline-flex;align-items:center;gap:var(--590b8d);border-radius:var(--5e8be4);padding:var(--05dd73) var(--66b80b);width:fit-content;color:var(--628fb7)}._badge_q6jfn_2[data-size=small]{height:var(--76ac8f);font-size:var(--e3a55b);font-weight:var(--8cd94c);line-height:var(--732f40)}._badge_q6jfn_2[data-size=medium]{height:var(--f316e1);font-size:var(--fdb733);font-weight:var(--9643c1);line-height:var(--754361)}._badge_q6jfn_2[data-size=large]{height:var(--7789ee);padding:var(--590b8d) var(--813599);font-size:var(--475c79);font-weight:var(--a3f251);line-height:var(--e33d9e)}._badge_q6jfn_2[data-type=neutral]{background:var(--319b29)}._badge_q6jfn_2[data-type=positive]{background:var(--1836a4)}._badge_q6jfn_2[data-type=warning]{background:var(--b503b8)}._badge_q6jfn_2[data-type=info]{background:var(--94a45e)}._badge_q6jfn_2[data-type=critical]{background:var(--f15644)}._badge_q6jfn_2[data-accent=unset]{color:var(--c9575b);background-color:var(--8f1238)}._badge_q6jfn_2[data-accent=unset][data-inverted=true]{color:var(--55407f);background-color:var(--7c8c3c)}._badge_q6jfn_2[data-accent=accent]{color:var(--dede3f);background-color:var(--eba8f8)}._badge_q6jfn_2[data-accent=accent][data-inverted=true]{color:var(--732eb5);background-color:var(--54c075)}._badge_q6jfn_2[data-accent=info]{color:var(--f3be0c);background-color:var(--7a1a33)}._badge_q6jfn_2[data-accent=info][data-inverted=true]{color:var(--506df4);background-color:var(--fa3428)}._badge_q6jfn_2[data-accent=positive]{color:var(--2a2719);background-color:var(--694afa)}._badge_q6jfn_2[data-accent=positive][data-inverted=true]{color:var(--30c365);background-color:var(--47c404)}._badge_q6jfn_2[data-accent=warning]{color:var(--84e571);background-color:var(--02372a)}._badge_q6jfn_2[data-accent=warning][data-inverted=true]{color:var(--363237);background-color:var(--08fa29)}._badge_q6jfn_2[data-accent=critical]{color:var(--036159);background-color:var(--22f022)}._badge_q6jfn_2[data-accent=critical][data-inverted=true]{color:var(--90eeff);background-color:var(--cdb1f6)}._badge_q6jfn_2[data-accent=tertiary]{color:var(--d7e14c);background-color:var(--a453d7)}._badge_q6jfn_2[data-accent=tertiary][data-inverted=true]{color:var(--ab5158);background-color:var(--50e919)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{F as d}from"./TokyoUITag-CQmRJtP0.js";import{L as v}from"./LayoutFlex-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{F as d}from"./TokyoUITag-CQmRJtP0.js";import{L as v}from"./LayoutFlex-4LBfyC68.js";import{I as T}from"./Icon-DqOWgXnU.js";import{g as j}from"./classNames-Cqk1oqv4.js";import{w as z}from"./componentNames-BSriaIOD.js";import{S as _}from"./StoryContextDSWeb-CViICLux.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./layout-relative-mMzJCmVd.js";import"./constants-DYYVurUY.js";import"./text-accent-Bgi4eAtI.js";import"./render-icon-DsMGBPwY.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-BvHSkgDA.js";import"./useTheme-ByES4oDS.js";import"./constants-mdQROz_Y.js";const b="_badge_q6jfn_2",k={badge:b},q=n=>{switch(n){case"xs":return"small";case"s":return"medium";case"m":return"large";default:return n}},a=({type:n="neutral",size:s="medium",leadingSvgIcon:o,dataset:x,children:h,accent:l,inverted:c})=>{const p=q(s),t={...x,size:p};l===void 0&&c===void 0?t.type=n:(t.accent=l||"unset",t.inverted=!!c);const I=j(t,{preplyDsComponent:z.Badge}),S=n==="neutral"?"primary":n;return e.jsxs("span",{...I,className:k.badge,children:[!!o&&p!=="small"&&e.jsx(T,{accent:S,size:s==="large"?"24":"16",svg:o}),h]})};try{a.displayName="Badge",a.__docgenInfo={description:"",displayName:"Badge",props:{type:{defaultValue:{value:"neutral"},description:"The type of the badge.",name:"type",required:!1,type:{name:'"neutral" | "info" | "positive" | "warning" | "critical" | undefined'}},size:{defaultValue:{value:"medium"},description:"The size of the badge.",name:"size",required:!1,type:{name:"BadgeSize | DeprecatedBadgeSize | undefined"}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon. Only displayed in \`medium\` and \`large\` sizes.
|
|
2
2
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
3
3
|
|
|
4
4
|
<Badge leadingSvgIcon={TokyoUITag}>Badge</Badge>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Box_tv8x9_4{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;color:var(--aface6);background-color:var(--786b9e);box-shadow:var(--a814c9);flex:1}._Box--box-radius-none_tv8x9_16{border-radius:var(--84e079)}._Box--box-radius-m_tv8x9_19{border-radius:var(--1c37d5)}._Box--box-radius-l_tv8x9_22{border-radius:var(--9e57e5)}._Box--box-radius-0_tv8x9_34{border-radius:var(--adc668)}._Box--box-radius-2_tv8x9_25{border-radius:var(--9817c7)}._Box--box-radius-4_tv8x9_28{border-radius:var(--7dcb5e)}._Box--box-radius-8_tv8x9_31{border-radius:var(--2071ea)}._Box--box-radius-12_tv8x9_46{border-radius:var(--c1925d)}._Box--box-radius-16_tv8x9_49{border-radius:var(--f3f949)}._Box--box-radius-24_tv8x9_52{border-radius:var(--67250f)}._Box--box-radius-32_tv8x9_55{border-radius:var(--fba602)}._Box--box-radius-48_tv8x9_58{border-radius:var(--f8b939)}._Box--box-radius-64_tv8x9_61{border-radius:var(--4d9939)}._Box--box-radius-96_tv8x9_64{border-radius:var(--a78cb4)}._Box--box-radius-160_tv8x9_67{border-radius:var(--439947)}@media (min-width: 400px){._Box--narrow-l--box-radius-none_tv8x9_71{border-radius:var(--84e079)}._Box--narrow-l--box-radius-m_tv8x9_74{border-radius:var(--1c37d5)}._Box--narrow-l--box-radius-l_tv8x9_77{border-radius:var(--9e57e5)}._Box--narrow-l--box-radius-0_tv8x9_89{border-radius:var(--adc668)}._Box--narrow-l--box-radius-2_tv8x9_80{border-radius:var(--9817c7)}._Box--narrow-l--box-radius-4_tv8x9_83{border-radius:var(--7dcb5e)}._Box--narrow-l--box-radius-8_tv8x9_86{border-radius:var(--2071ea)}._Box--narrow-l--box-radius-12_tv8x9_101{border-radius:var(--c1925d)}._Box--narrow-l--box-radius-16_tv8x9_104{border-radius:var(--f3f949)}._Box--narrow-l--box-radius-24_tv8x9_107{border-radius:var(--67250f)}._Box--narrow-l--box-radius-32_tv8x9_110{border-radius:var(--fba602)}._Box--narrow-l--box-radius-48_tv8x9_113{border-radius:var(--f8b939)}._Box--narrow-l--box-radius-64_tv8x9_116{border-radius:var(--4d9939)}._Box--narrow-l--box-radius-96_tv8x9_119{border-radius:var(--a78cb4)}._Box--narrow-l--box-radius-160_tv8x9_122{border-radius:var(--439947)}}@media (min-width: 700px){._Box--medium-s--box-radius-none_tv8x9_127{border-radius:var(--84e079)}._Box--medium-s--box-radius-m_tv8x9_130{border-radius:var(--1c37d5)}._Box--medium-s--box-radius-l_tv8x9_133{border-radius:var(--9e57e5)}._Box--medium-s--box-radius-0_tv8x9_145{border-radius:var(--adc668)}._Box--medium-s--box-radius-2_tv8x9_136{border-radius:var(--9817c7)}._Box--medium-s--box-radius-4_tv8x9_139{border-radius:var(--7dcb5e)}._Box--medium-s--box-radius-8_tv8x9_142{border-radius:var(--2071ea)}._Box--medium-s--box-radius-12_tv8x9_157{border-radius:var(--c1925d)}._Box--medium-s--box-radius-16_tv8x9_160{border-radius:var(--f3f949)}._Box--medium-s--box-radius-24_tv8x9_163{border-radius:var(--67250f)}._Box--medium-s--box-radius-32_tv8x9_166{border-radius:var(--fba602)}._Box--medium-s--box-radius-48_tv8x9_169{border-radius:var(--f8b939)}._Box--medium-s--box-radius-64_tv8x9_172{border-radius:var(--4d9939)}._Box--medium-s--box-radius-96_tv8x9_175{border-radius:var(--a78cb4)}._Box--medium-s--box-radius-160_tv8x9_178{border-radius:var(--439947)}}@media (min-width: 880px){._Box--medium-l--box-radius-none_tv8x9_183{border-radius:var(--84e079)}._Box--medium-l--box-radius-m_tv8x9_186{border-radius:var(--1c37d5)}._Box--medium-l--box-radius-l_tv8x9_189{border-radius:var(--9e57e5)}._Box--medium-l--box-radius-0_tv8x9_201{border-radius:var(--adc668)}._Box--medium-l--box-radius-2_tv8x9_192{border-radius:var(--9817c7)}._Box--medium-l--box-radius-4_tv8x9_195{border-radius:var(--7dcb5e)}._Box--medium-l--box-radius-8_tv8x9_198{border-radius:var(--2071ea)}._Box--medium-l--box-radius-12_tv8x9_213{border-radius:var(--c1925d)}._Box--medium-l--box-radius-16_tv8x9_216{border-radius:var(--f3f949)}._Box--medium-l--box-radius-24_tv8x9_219{border-radius:var(--67250f)}._Box--medium-l--box-radius-32_tv8x9_222{border-radius:var(--fba602)}._Box--medium-l--box-radius-48_tv8x9_225{border-radius:var(--f8b939)}._Box--medium-l--box-radius-64_tv8x9_228{border-radius:var(--4d9939)}._Box--medium-l--box-radius-96_tv8x9_231{border-radius:var(--a78cb4)}._Box--medium-l--box-radius-160_tv8x9_234{border-radius:var(--439947)}}@media (min-width: 1200px){._Box--wide-s--box-radius-none_tv8x9_239{border-radius:var(--84e079)}._Box--wide-s--box-radius-m_tv8x9_242{border-radius:var(--1c37d5)}._Box--wide-s--box-radius-l_tv8x9_245{border-radius:var(--9e57e5)}._Box--wide-s--box-radius-0_tv8x9_257{border-radius:var(--adc668)}._Box--wide-s--box-radius-2_tv8x9_248{border-radius:var(--9817c7)}._Box--wide-s--box-radius-4_tv8x9_251{border-radius:var(--7dcb5e)}._Box--wide-s--box-radius-8_tv8x9_254{border-radius:var(--2071ea)}._Box--wide-s--box-radius-12_tv8x9_269{border-radius:var(--c1925d)}._Box--wide-s--box-radius-16_tv8x9_272{border-radius:var(--f3f949)}._Box--wide-s--box-radius-24_tv8x9_275{border-radius:var(--67250f)}._Box--wide-s--box-radius-32_tv8x9_278{border-radius:var(--fba602)}._Box--wide-s--box-radius-48_tv8x9_281{border-radius:var(--f8b939)}._Box--wide-s--box-radius-64_tv8x9_284{border-radius:var(--4d9939)}._Box--wide-s--box-radius-96_tv8x9_287{border-radius:var(--a78cb4)}._Box--wide-s--box-radius-160_tv8x9_290{border-radius:var(--439947)}}@media (min-width: 1900px){._Box--wide-l--box-radius-none_tv8x9_295{border-radius:var(--84e079)}._Box--wide-l--box-radius-m_tv8x9_298{border-radius:var(--1c37d5)}._Box--wide-l--box-radius-l_tv8x9_301{border-radius:var(--9e57e5)}._Box--wide-l--box-radius-0_tv8x9_313{border-radius:var(--adc668)}._Box--wide-l--box-radius-2_tv8x9_304{border-radius:var(--9817c7)}._Box--wide-l--box-radius-4_tv8x9_307{border-radius:var(--7dcb5e)}._Box--wide-l--box-radius-8_tv8x9_310{border-radius:var(--2071ea)}._Box--wide-l--box-radius-12_tv8x9_325{border-radius:var(--c1925d)}._Box--wide-l--box-radius-16_tv8x9_328{border-radius:var(--f3f949)}._Box--wide-l--box-radius-24_tv8x9_331{border-radius:var(--67250f)}._Box--wide-l--box-radius-32_tv8x9_334{border-radius:var(--fba602)}._Box--wide-l--box-radius-48_tv8x9_337{border-radius:var(--f8b939)}._Box--wide-l--box-radius-64_tv8x9_340{border-radius:var(--4d9939)}._Box--wide-l--box-radius-96_tv8x9_343{border-radius:var(--a78cb4)}._Box--wide-l--box-radius-160_tv8x9_346{border-radius:var(--439947)}}._Box--background-white_tv8x9_350{background-color:var(--145676)}._Box--background-gray-100_tv8x9_353{background-color:var(--55407f)}._Box--background-gray-200_tv8x9_356{background-color:var(--8f1238)}._Box--background-gray-300_tv8x9_359{background-color:var(--da403c)}._Box--background-gray-400_tv8x9_362{background-color:var(--7c8c3c)}._Box--background-gray-500_tv8x9_365{background-color:var(--c9575b)}._Box--background-gray-600_tv8x9_368{background-color:var(--2fb6f7)}._Box--background-teal-100_tv8x9_371{background-color:var(--54ed1d)}._Box--background-teal-200_tv8x9_374{background-color:var(--b706bf)}._Box--background-teal-300_tv8x9_377{background-color:var(--4adefb)}._Box--background-teal-400_tv8x9_380{background-color:var(--de8a40)}._Box--background-teal-500_tv8x9_383{background-color:var(--574543)}._Box--background-green-100_tv8x9_386{background-color:var(--1383a7)}._Box--background-green-200_tv8x9_389{background-color:var(--9f1066)}._Box--background-green-300_tv8x9_392{background-color:var(--d4cf94)}._Box--background-green-400_tv8x9_395{background-color:var(--bbfa9f)}._Box--background-green-500_tv8x9_398{background-color:var(--5f8b30)}._Box--background-yellow-100_tv8x9_401{background-color:var(--c7d8be)}._Box--background-yellow-200_tv8x9_404{background-color:var(--17bab8)}._Box--background-yellow-300_tv8x9_407{background-color:var(--f017e5)}._Box--background-yellow-400_tv8x9_410{background-color:var(--2242ed)}._Box--background-yellow-500_tv8x9_413{background-color:var(--e40de4)}._Box--background-red-100_tv8x9_416{background-color:var(--ecb5d5)}._Box--background-red-200_tv8x9_419{background-color:var(--5b5cb0)}._Box--background-red-300_tv8x9_422{background-color:var(--d55c71)}._Box--background-red-400_tv8x9_425{background-color:var(--4e47fe)}._Box--background-red-500_tv8x9_428{background-color:var(--3e7877)}._Box--background-blue-100_tv8x9_431{background-color:var(--21906f)}._Box--background-blue-200_tv8x9_434{background-color:var(--5d87f3)}._Box--background-blue-300_tv8x9_437{background-color:var(--201e14)}._Box--background-blue-400_tv8x9_440{background-color:var(--e1c27c)}._Box--background-blue-500_tv8x9_443{background-color:var(--6a1420)}._Box--background-magenta-100_tv8x9_446{background-color:var(--1a9963)}._Box--background-magenta-200_tv8x9_449{background-color:var(--b774df)}._Box--background-magenta-300_tv8x9_452{background-color:var(--f72cdd)}._Box--background-magenta-400_tv8x9_455{background-color:var(--6cbd80)}._Box--background-magenta-500_tv8x9_458{background-color:var(--5893e7)}._Box--background-primary_tv8x9_461{background-color:var(--3546c3)}._Box--background-secondary_tv8x9_464{background-color:var(--302ecf)}._Box--background-tertiary_tv8x9_467{background-color:var(--a5c761)}._Box--background-overlay_tv8x9_470{background-color:var(--02a0d5)}._Box--background-disabled_tv8x9_473{background-color:var(--319b29)}._Box--background-brand_tv8x9_476{background-color:var(--cd91ab)}._Box--background-brandB2b_tv8x9_479{background-color:var(--706789)}._Box--background-accentLight_tv8x9_482{background-color:var(--560eda)}._Box--background-accentDark_tv8x9_485{background-color:var(--e4c520)}._Box--background-positiveLight_tv8x9_488{background-color:var(--1836a4)}._Box--background-positiveDark_tv8x9_491{background-color:var(--ae7f1f)}._Box--background-infoLight_tv8x9_494{background-color:var(--94a45e)}._Box--background-infoDark_tv8x9_497{background-color:var(--79dffb)}._Box--background-warningLight_tv8x9_500{background-color:var(--b503b8)}._Box--background-warningDark_tv8x9_503{background-color:var(--34fc43)}._Box--background-criticalLight_tv8x9_506{background-color:var(--f15644)}._Box--background-criticalDark_tv8x9_509{background-color:var(--87fcf8)}._Box--background-statusOnline_tv8x9_512{background-color:var(--cbc115)}._Box--background-statusOffline_tv8x9_515{background-color:var(--7ff085)}._Box--background-primaryInverted_tv8x9_518{background-color:var(--4983fe)}._Box--background-secondaryInverted_tv8x9_521{background-color:var(--19649f)}._Box--background-tertiaryInverted_tv8x9_524{background-color:var(--a469f2)}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import{j as o}from"./jsx-runtime-CKrituN3.js";import{H as v}from"./Heading-Des9-Kxs.js";import{L as k}from"./LayoutFlex-4LBfyC68.js";import{T as w}from"./Text-a99inIAW.js";import{g as p}from"./layout-relative-mMzJCmVd.js";import{m as y,s as d,g as f,e as h,f as L,L as D}from"./classNames-Cqk1oqv4.js";import{w as i}from"./componentNames-BSriaIOD.js";import{S as N}from"./StoryContextDSWeb-CViICLux.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./text-accent-Bgi4eAtI.js";import"./text-centered-B7xS0eZv.js";import"./constants-DYYVurUY.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-BvHSkgDA.js";import"./useTheme-ByES4oDS.js";import"./constants-mdQROz_Y.js";const C="_Box_tv8x9_4",T={Box:C,"Box--box-radius-none":"_Box--box-radius-none_tv8x9_16","Box--box-radius-m":"_Box--box-radius-m_tv8x9_19","Box--box-radius-l":"_Box--box-radius-l_tv8x9_22","Box--box-radius-2":"_Box--box-radius-2_tv8x9_25","Box--box-radius-4":"_Box--box-radius-4_tv8x9_28","Box--box-radius-8":"_Box--box-radius-8_tv8x9_31","Box--box-radius-0":"_Box--box-radius-0_tv8x9_34","Box--box-radius-12":"_Box--box-radius-12_tv8x9_46","Box--box-radius-16":"_Box--box-radius-16_tv8x9_49","Box--box-radius-24":"_Box--box-radius-24_tv8x9_52","Box--box-radius-32":"_Box--box-radius-32_tv8x9_55","Box--box-radius-48":"_Box--box-radius-48_tv8x9_58","Box--box-radius-64":"_Box--box-radius-64_tv8x9_61","Box--box-radius-96":"_Box--box-radius-96_tv8x9_64","Box--box-radius-160":"_Box--box-radius-160_tv8x9_67","Box--narrow-l--box-radius-none":"_Box--narrow-l--box-radius-none_tv8x9_71","Box--narrow-l--box-radius-m":"_Box--narrow-l--box-radius-m_tv8x9_74","Box--narrow-l--box-radius-l":"_Box--narrow-l--box-radius-l_tv8x9_77","Box--narrow-l--box-radius-2":"_Box--narrow-l--box-radius-2_tv8x9_80","Box--narrow-l--box-radius-4":"_Box--narrow-l--box-radius-4_tv8x9_83","Box--narrow-l--box-radius-8":"_Box--narrow-l--box-radius-8_tv8x9_86","Box--narrow-l--box-radius-0":"_Box--narrow-l--box-radius-0_tv8x9_89","Box--narrow-l--box-radius-12":"_Box--narrow-l--box-radius-12_tv8x9_101","Box--narrow-l--box-radius-16":"_Box--narrow-l--box-radius-16_tv8x9_104","Box--narrow-l--box-radius-24":"_Box--narrow-l--box-radius-24_tv8x9_107","Box--narrow-l--box-radius-32":"_Box--narrow-l--box-radius-32_tv8x9_110","Box--narrow-l--box-radius-48":"_Box--narrow-l--box-radius-48_tv8x9_113","Box--narrow-l--box-radius-64":"_Box--narrow-l--box-radius-64_tv8x9_116","Box--narrow-l--box-radius-96":"_Box--narrow-l--box-radius-96_tv8x9_119","Box--narrow-l--box-radius-160":"_Box--narrow-l--box-radius-160_tv8x9_122","Box--medium-s--box-radius-none":"_Box--medium-s--box-radius-none_tv8x9_127","Box--medium-s--box-radius-m":"_Box--medium-s--box-radius-m_tv8x9_130","Box--medium-s--box-radius-l":"_Box--medium-s--box-radius-l_tv8x9_133","Box--medium-s--box-radius-2":"_Box--medium-s--box-radius-2_tv8x9_136","Box--medium-s--box-radius-4":"_Box--medium-s--box-radius-4_tv8x9_139","Box--medium-s--box-radius-8":"_Box--medium-s--box-radius-8_tv8x9_142","Box--medium-s--box-radius-0":"_Box--medium-s--box-radius-0_tv8x9_145","Box--medium-s--box-radius-12":"_Box--medium-s--box-radius-12_tv8x9_157","Box--medium-s--box-radius-16":"_Box--medium-s--box-radius-16_tv8x9_160","Box--medium-s--box-radius-24":"_Box--medium-s--box-radius-24_tv8x9_163","Box--medium-s--box-radius-32":"_Box--medium-s--box-radius-32_tv8x9_166","Box--medium-s--box-radius-48":"_Box--medium-s--box-radius-48_tv8x9_169","Box--medium-s--box-radius-64":"_Box--medium-s--box-radius-64_tv8x9_172","Box--medium-s--box-radius-96":"_Box--medium-s--box-radius-96_tv8x9_175","Box--medium-s--box-radius-160":"_Box--medium-s--box-radius-160_tv8x9_178","Box--medium-l--box-radius-none":"_Box--medium-l--box-radius-none_tv8x9_183","Box--medium-l--box-radius-m":"_Box--medium-l--box-radius-m_tv8x9_186","Box--medium-l--box-radius-l":"_Box--medium-l--box-radius-l_tv8x9_189","Box--medium-l--box-radius-2":"_Box--medium-l--box-radius-2_tv8x9_192","Box--medium-l--box-radius-4":"_Box--medium-l--box-radius-4_tv8x9_195","Box--medium-l--box-radius-8":"_Box--medium-l--box-radius-8_tv8x9_198","Box--medium-l--box-radius-0":"_Box--medium-l--box-radius-0_tv8x9_201","Box--medium-l--box-radius-12":"_Box--medium-l--box-radius-12_tv8x9_213","Box--medium-l--box-radius-16":"_Box--medium-l--box-radius-16_tv8x9_216","Box--medium-l--box-radius-24":"_Box--medium-l--box-radius-24_tv8x9_219","Box--medium-l--box-radius-32":"_Box--medium-l--box-radius-32_tv8x9_222","Box--medium-l--box-radius-48":"_Box--medium-l--box-radius-48_tv8x9_225","Box--medium-l--box-radius-64":"_Box--medium-l--box-radius-64_tv8x9_228","Box--medium-l--box-radius-96":"_Box--medium-l--box-radius-96_tv8x9_231","Box--medium-l--box-radius-160":"_Box--medium-l--box-radius-160_tv8x9_234","Box--wide-s--box-radius-none":"_Box--wide-s--box-radius-none_tv8x9_239","Box--wide-s--box-radius-m":"_Box--wide-s--box-radius-m_tv8x9_242","Box--wide-s--box-radius-l":"_Box--wide-s--box-radius-l_tv8x9_245","Box--wide-s--box-radius-2":"_Box--wide-s--box-radius-2_tv8x9_248","Box--wide-s--box-radius-4":"_Box--wide-s--box-radius-4_tv8x9_251","Box--wide-s--box-radius-8":"_Box--wide-s--box-radius-8_tv8x9_254","Box--wide-s--box-radius-0":"_Box--wide-s--box-radius-0_tv8x9_257","Box--wide-s--box-radius-12":"_Box--wide-s--box-radius-12_tv8x9_269","Box--wide-s--box-radius-16":"_Box--wide-s--box-radius-16_tv8x9_272","Box--wide-s--box-radius-24":"_Box--wide-s--box-radius-24_tv8x9_275","Box--wide-s--box-radius-32":"_Box--wide-s--box-radius-32_tv8x9_278","Box--wide-s--box-radius-48":"_Box--wide-s--box-radius-48_tv8x9_281","Box--wide-s--box-radius-64":"_Box--wide-s--box-radius-64_tv8x9_284","Box--wide-s--box-radius-96":"_Box--wide-s--box-radius-96_tv8x9_287","Box--wide-s--box-radius-160":"_Box--wide-s--box-radius-160_tv8x9_290","Box--wide-l--box-radius-none":"_Box--wide-l--box-radius-none_tv8x9_295","Box--wide-l--box-radius-m":"_Box--wide-l--box-radius-m_tv8x9_298","Box--wide-l--box-radius-l":"_Box--wide-l--box-radius-l_tv8x9_301","Box--wide-l--box-radius-2":"_Box--wide-l--box-radius-2_tv8x9_304","Box--wide-l--box-radius-4":"_Box--wide-l--box-radius-4_tv8x9_307","Box--wide-l--box-radius-8":"_Box--wide-l--box-radius-8_tv8x9_310","Box--wide-l--box-radius-0":"_Box--wide-l--box-radius-0_tv8x9_313","Box--wide-l--box-radius-12":"_Box--wide-l--box-radius-12_tv8x9_325","Box--wide-l--box-radius-16":"_Box--wide-l--box-radius-16_tv8x9_328","Box--wide-l--box-radius-24":"_Box--wide-l--box-radius-24_tv8x9_331","Box--wide-l--box-radius-32":"_Box--wide-l--box-radius-32_tv8x9_334","Box--wide-l--box-radius-48":"_Box--wide-l--box-radius-48_tv8x9_337","Box--wide-l--box-radius-64":"_Box--wide-l--box-radius-64_tv8x9_340","Box--wide-l--box-radius-96":"_Box--wide-l--box-radius-96_tv8x9_343","Box--wide-l--box-radius-160":"_Box--wide-l--box-radius-160_tv8x9_346","Box--background-white":"_Box--background-white_tv8x9_350","Box--background-gray-100":"_Box--background-gray-100_tv8x9_353","Box--background-gray-200":"_Box--background-gray-200_tv8x9_356","Box--background-gray-300":"_Box--background-gray-300_tv8x9_359","Box--background-gray-400":"_Box--background-gray-400_tv8x9_362","Box--background-gray-500":"_Box--background-gray-500_tv8x9_365","Box--background-gray-600":"_Box--background-gray-600_tv8x9_368","Box--background-teal-100":"_Box--background-teal-100_tv8x9_371","Box--background-teal-200":"_Box--background-teal-200_tv8x9_374","Box--background-teal-300":"_Box--background-teal-300_tv8x9_377","Box--background-teal-400":"_Box--background-teal-400_tv8x9_380","Box--background-teal-500":"_Box--background-teal-500_tv8x9_383","Box--background-green-100":"_Box--background-green-100_tv8x9_386","Box--background-green-200":"_Box--background-green-200_tv8x9_389","Box--background-green-300":"_Box--background-green-300_tv8x9_392","Box--background-green-400":"_Box--background-green-400_tv8x9_395","Box--background-green-500":"_Box--background-green-500_tv8x9_398","Box--background-yellow-100":"_Box--background-yellow-100_tv8x9_401","Box--background-yellow-200":"_Box--background-yellow-200_tv8x9_404","Box--background-yellow-300":"_Box--background-yellow-300_tv8x9_407","Box--background-yellow-400":"_Box--background-yellow-400_tv8x9_410","Box--background-yellow-500":"_Box--background-yellow-500_tv8x9_413","Box--background-red-100":"_Box--background-red-100_tv8x9_416","Box--background-red-200":"_Box--background-red-200_tv8x9_419","Box--background-red-300":"_Box--background-red-300_tv8x9_422","Box--background-red-400":"_Box--background-red-400_tv8x9_425","Box--background-red-500":"_Box--background-red-500_tv8x9_428","Box--background-blue-100":"_Box--background-blue-100_tv8x9_431","Box--background-blue-200":"_Box--background-blue-200_tv8x9_434","Box--background-blue-300":"_Box--background-blue-300_tv8x9_437","Box--background-blue-400":"_Box--background-blue-400_tv8x9_440","Box--background-blue-500":"_Box--background-blue-500_tv8x9_443","Box--background-magenta-100":"_Box--background-magenta-100_tv8x9_446","Box--background-magenta-200":"_Box--background-magenta-200_tv8x9_449","Box--background-magenta-300":"_Box--background-magenta-300_tv8x9_452","Box--background-magenta-400":"_Box--background-magenta-400_tv8x9_455","Box--background-magenta-500":"_Box--background-magenta-500_tv8x9_458","Box--background-primary":"_Box--background-primary_tv8x9_461","Box--background-secondary":"_Box--background-secondary_tv8x9_464","Box--background-tertiary":"_Box--background-tertiary_tv8x9_467","Box--background-overlay":"_Box--background-overlay_tv8x9_470","Box--background-disabled":"_Box--background-disabled_tv8x9_473","Box--background-brand":"_Box--background-brand_tv8x9_476","Box--background-brandB2b":"_Box--background-brandB2b_tv8x9_479","Box--background-accentLight":"_Box--background-accentLight_tv8x9_482","Box--background-accentDark":"_Box--background-accentDark_tv8x9_485","Box--background-positiveLight":"_Box--background-positiveLight_tv8x9_488","Box--background-positiveDark":"_Box--background-positiveDark_tv8x9_491","Box--background-infoLight":"_Box--background-infoLight_tv8x9_494","Box--background-infoDark":"_Box--background-infoDark_tv8x9_497","Box--background-warningLight":"_Box--background-warningLight_tv8x9_500","Box--background-warningDark":"_Box--background-warningDark_tv8x9_503","Box--background-criticalLight":"_Box--background-criticalLight_tv8x9_506","Box--background-criticalDark":"_Box--background-criticalDark_tv8x9_509","Box--background-statusOnline":"_Box--background-statusOnline_tv8x9_512","Box--background-statusOffline":"_Box--background-statusOffline_tv8x9_515","Box--background-primaryInverted":"_Box--background-primaryInverted_tv8x9_518","Box--background-secondaryInverted":"_Box--background-secondaryInverted_tv8x9_521","Box--background-tertiaryInverted":"_Box--background-tertiaryInverted_tv8x9_524"},r=({children:a,background:s,radius:t=h,padding:n=L,tag:b,dataset:B})=>{const m=y(T,i.Box,[d("box-radius",t),d("background",s)]),l=p(n),c=b??D,g={className:[...m,...l].join(" "),...f(B,{preplyDsComponent:i.Box})};return o.jsx(c,{...g,children:a})};try{r.displayName="Box",r.__docgenInfo={description:"A styleable container.\n\nUse this with `Layout*` components to create complex content containers.",displayName:"Box",props:{background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:"ColorName | ColorBackground | undefined"}},radius:{defaultValue:null,description:"",name:"radius",required:!1,type:{name:"Responsive<BoxRadius> | undefined"}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"LayoutTag | undefined"}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"Responsive<ShortHand<Spacing> | ShortHand<BoxPadding>> | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}}}}}catch{}const J={title:"components/Box",component:r,decorators:[a=>o.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:o.jsx(N,{theme:"tokyo-ui",children:a()})})]},x=()=>o.jsx(r,{background:"positiveLight",children:o.jsxs(k,{gap:"xs",direction:"column",children:[o.jsx(v,{level:"h3",accent:"positive",children:"Heading"}),o.jsx(w,{accent:"positive",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros"})]})});x.storyName="Box";var _,e,u;x.parameters={...x.parameters,docs:{...(_=x.parameters)==null?void 0:_.docs,source:{originalSource:`() => <Box background="positiveLight">
|
|
2
|
+
<LayoutFlex gap="xs" direction="column">
|
|
3
|
+
<Heading level="h3" accent="positive">
|
|
4
|
+
Heading
|
|
5
|
+
</Heading>
|
|
6
|
+
<Text accent="positive">
|
|
7
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit
|
|
8
|
+
amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et
|
|
9
|
+
vitae eros
|
|
10
|
+
</Text>
|
|
11
|
+
</LayoutFlex>
|
|
12
|
+
</Box>`,...(u=(e=x.parameters)==null?void 0:e.docs)==null?void 0:u.source}}};const K=["Base"];export{x as Base,K as __namedExportsOrder,J as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{r as C}from"./render-icon-DsMGBPwY.js";import{r as N}from"./index-CBqU2yxZ.js";import{S as M}from"./Spinner-DNhrV5BK.js";import{u as X}from"./useHostname-B91Ahm0o.js";import{m as Z,s as _,b as u,g as G,k as Q,d as f,B as D,a as F}from"./classNames-Cqk1oqv4.js";import{m as Y}from"./index-CC6DAVyL.js";import{w as E}from"./componentNames-BSriaIOD.js";const ee="_ButtonBase_196be_51",p={"button-width--width-full":"_button-width--width-full_196be_5","button-width--width-auto":"_button-width--width-auto_196be_8","button-width--narrow-l--width-full":"_button-width--narrow-l--width-full_196be_12","button-width--narrow-l--width-auto":"_button-width--narrow-l--width-auto_196be_15","button-width--medium-s--width-full":"_button-width--medium-s--width-full_196be_20","button-width--medium-s--width-auto":"_button-width--medium-s--width-auto_196be_23","button-width--medium-l--width-full":"_button-width--medium-l--width-full_196be_28","button-width--medium-l--width-auto":"_button-width--medium-l--width-auto_196be_31","button-width--wide-s--width-full":"_button-width--wide-s--width-full_196be_36","button-width--wide-s--width-auto":"_button-width--wide-s--width-auto_196be_39","button-width--wide-l--width-full":"_button-width--wide-l--width-full_196be_44","button-width--wide-l--width-auto":"_button-width--wide-l--width-auto_196be_47",ButtonBase:ee,"ButtonBase--content":"_ButtonBase--content_196be_77","ButtonBase--is-icon-button":"_ButtonBase--is-icon-button_196be_84","ButtonBase--busy":"_ButtonBase--busy_196be_91","ButtonBase--is-busy":"_ButtonBase--is-busy_196be_114","ButtonBase--width-full":"_ButtonBase--width-full_196be_121","ButtonBase--width-auto":"_ButtonBase--width-auto_196be_124","ButtonBase--narrow-l--width-full":"_ButtonBase--narrow-l--width-full_196be_128","ButtonBase--narrow-l--width-auto":"_ButtonBase--narrow-l--width-auto_196be_131","ButtonBase--medium-s--width-full":"_ButtonBase--medium-s--width-full_196be_136","ButtonBase--medium-s--width-auto":"_ButtonBase--medium-s--width-auto_196be_139","ButtonBase--medium-l--width-full":"_ButtonBase--medium-l--width-full_196be_144","ButtonBase--medium-l--width-auto":"_ButtonBase--medium-l--width-auto_196be_147","ButtonBase--wide-s--width-full":"_ButtonBase--wide-s--width-full_196be_152","ButtonBase--wide-s--width-auto":"_ButtonBase--wide-s--width-auto_196be_155","ButtonBase--wide-l--width-full":"_ButtonBase--wide-l--width-full_196be_160","ButtonBase--wide-l--width-auto":"_ButtonBase--wide-l--width-auto_196be_163","ButtonBase--size-xs":"_ButtonBase--size-xs_196be_167","ButtonBase--is-icon-button-size-xs":"_ButtonBase--is-icon-button-size-xs_196be_176","ButtonBase--size-s":"_ButtonBase--size-s_196be_181","ButtonBase--is-icon-button-size-s":"_ButtonBase--is-icon-button-size-s_196be_190","ButtonBase--size-m":"_ButtonBase--size-m_196be_195","ButtonBase--is-icon-button-size-m":"_ButtonBase--is-icon-button-size-m_196be_204","ButtonBase--size-l":"_ButtonBase--size-l_196be_209","ButtonBase--is-icon-button-size-l":"_ButtonBase--is-icon-button-size-l_196be_218","ButtonBase--size-xl":"_ButtonBase--size-xl_196be_223","ButtonBase--is-icon-button-size-xl":"_ButtonBase--is-icon-button-size-xl_196be_232","ButtonBase--size-large":"_ButtonBase--size-large_196be_237","ButtonBase--is-icon-button-size-large":"_ButtonBase--is-icon-button-size-large_196be_246","ButtonBase--size-medium":"_ButtonBase--size-medium_196be_251","ButtonBase--is-icon-button-size-medium":"_ButtonBase--is-icon-button-size-medium_196be_260","ButtonBase--size-small":"_ButtonBase--size-small_196be_265","ButtonBase--is-icon-button-size-small":"_ButtonBase--is-icon-button-size-small_196be_274","ButtonBase--narrow-l--size-xs":"_ButtonBase--narrow-l--size-xs_196be_280","ButtonBase--narrow-l--is-icon-button-size-xs":"_ButtonBase--narrow-l--is-icon-button-size-xs_196be_289","ButtonBase--narrow-l--size-s":"_ButtonBase--narrow-l--size-s_196be_294","ButtonBase--narrow-l--is-icon-button-size-s":"_ButtonBase--narrow-l--is-icon-button-size-s_196be_303","ButtonBase--narrow-l--size-m":"_ButtonBase--narrow-l--size-m_196be_308","ButtonBase--narrow-l--is-icon-button-size-m":"_ButtonBase--narrow-l--is-icon-button-size-m_196be_317","ButtonBase--narrow-l--size-l":"_ButtonBase--narrow-l--size-l_196be_322","ButtonBase--narrow-l--is-icon-button-size-l":"_ButtonBase--narrow-l--is-icon-button-size-l_196be_331","ButtonBase--narrow-l--size-xl":"_ButtonBase--narrow-l--size-xl_196be_336","ButtonBase--narrow-l--is-icon-button-size-xl":"_ButtonBase--narrow-l--is-icon-button-size-xl_196be_345","ButtonBase--narrow-l--size-large":"_ButtonBase--narrow-l--size-large_196be_350","ButtonBase--narrow-l--is-icon-button-size-large":"_ButtonBase--narrow-l--is-icon-button-size-large_196be_359","ButtonBase--narrow-l--size-medium":"_ButtonBase--narrow-l--size-medium_196be_364","ButtonBase--narrow-l--is-icon-button-size-medium":"_ButtonBase--narrow-l--is-icon-button-size-medium_196be_373","ButtonBase--narrow-l--size-small":"_ButtonBase--narrow-l--size-small_196be_378","ButtonBase--narrow-l--is-icon-button-size-small":"_ButtonBase--narrow-l--is-icon-button-size-small_196be_387","ButtonBase--medium-s--size-xs":"_ButtonBase--medium-s--size-xs_196be_394","ButtonBase--medium-s--is-icon-button-size-xs":"_ButtonBase--medium-s--is-icon-button-size-xs_196be_403","ButtonBase--medium-s--size-s":"_ButtonBase--medium-s--size-s_196be_408","ButtonBase--medium-s--is-icon-button-size-s":"_ButtonBase--medium-s--is-icon-button-size-s_196be_417","ButtonBase--medium-s--size-m":"_ButtonBase--medium-s--size-m_196be_422","ButtonBase--medium-s--is-icon-button-size-m":"_ButtonBase--medium-s--is-icon-button-size-m_196be_431","ButtonBase--medium-s--size-l":"_ButtonBase--medium-s--size-l_196be_436","ButtonBase--medium-s--is-icon-button-size-l":"_ButtonBase--medium-s--is-icon-button-size-l_196be_445","ButtonBase--medium-s--size-xl":"_ButtonBase--medium-s--size-xl_196be_450","ButtonBase--medium-s--is-icon-button-size-xl":"_ButtonBase--medium-s--is-icon-button-size-xl_196be_459","ButtonBase--medium-s--size-large":"_ButtonBase--medium-s--size-large_196be_464","ButtonBase--medium-s--is-icon-button-size-large":"_ButtonBase--medium-s--is-icon-button-size-large_196be_473","ButtonBase--medium-s--size-medium":"_ButtonBase--medium-s--size-medium_196be_478","ButtonBase--medium-s--is-icon-button-size-medium":"_ButtonBase--medium-s--is-icon-button-size-medium_196be_487","ButtonBase--medium-s--size-small":"_ButtonBase--medium-s--size-small_196be_492","ButtonBase--medium-s--is-icon-button-size-small":"_ButtonBase--medium-s--is-icon-button-size-small_196be_501","ButtonBase--medium-l--size-xs":"_ButtonBase--medium-l--size-xs_196be_508","ButtonBase--medium-l--is-icon-button-size-xs":"_ButtonBase--medium-l--is-icon-button-size-xs_196be_517","ButtonBase--medium-l--size-s":"_ButtonBase--medium-l--size-s_196be_522","ButtonBase--medium-l--is-icon-button-size-s":"_ButtonBase--medium-l--is-icon-button-size-s_196be_531","ButtonBase--medium-l--size-m":"_ButtonBase--medium-l--size-m_196be_536","ButtonBase--medium-l--is-icon-button-size-m":"_ButtonBase--medium-l--is-icon-button-size-m_196be_545","ButtonBase--medium-l--size-l":"_ButtonBase--medium-l--size-l_196be_550","ButtonBase--medium-l--is-icon-button-size-l":"_ButtonBase--medium-l--is-icon-button-size-l_196be_559","ButtonBase--medium-l--size-xl":"_ButtonBase--medium-l--size-xl_196be_564","ButtonBase--medium-l--is-icon-button-size-xl":"_ButtonBase--medium-l--is-icon-button-size-xl_196be_573","ButtonBase--medium-l--size-large":"_ButtonBase--medium-l--size-large_196be_578","ButtonBase--medium-l--is-icon-button-size-large":"_ButtonBase--medium-l--is-icon-button-size-large_196be_587","ButtonBase--medium-l--size-medium":"_ButtonBase--medium-l--size-medium_196be_592","ButtonBase--medium-l--is-icon-button-size-medium":"_ButtonBase--medium-l--is-icon-button-size-medium_196be_601","ButtonBase--medium-l--size-small":"_ButtonBase--medium-l--size-small_196be_606","ButtonBase--medium-l--is-icon-button-size-small":"_ButtonBase--medium-l--is-icon-button-size-small_196be_615","ButtonBase--wide-s--size-xs":"_ButtonBase--wide-s--size-xs_196be_622","ButtonBase--wide-s--is-icon-button-size-xs":"_ButtonBase--wide-s--is-icon-button-size-xs_196be_631","ButtonBase--wide-s--size-s":"_ButtonBase--wide-s--size-s_196be_636","ButtonBase--wide-s--is-icon-button-size-s":"_ButtonBase--wide-s--is-icon-button-size-s_196be_645","ButtonBase--wide-s--size-m":"_ButtonBase--wide-s--size-m_196be_650","ButtonBase--wide-s--is-icon-button-size-m":"_ButtonBase--wide-s--is-icon-button-size-m_196be_659","ButtonBase--wide-s--size-l":"_ButtonBase--wide-s--size-l_196be_664","ButtonBase--wide-s--is-icon-button-size-l":"_ButtonBase--wide-s--is-icon-button-size-l_196be_673","ButtonBase--wide-s--size-xl":"_ButtonBase--wide-s--size-xl_196be_678","ButtonBase--wide-s--is-icon-button-size-xl":"_ButtonBase--wide-s--is-icon-button-size-xl_196be_687","ButtonBase--wide-s--size-large":"_ButtonBase--wide-s--size-large_196be_692","ButtonBase--wide-s--is-icon-button-size-large":"_ButtonBase--wide-s--is-icon-button-size-large_196be_701","ButtonBase--wide-s--size-medium":"_ButtonBase--wide-s--size-medium_196be_706","ButtonBase--wide-s--is-icon-button-size-medium":"_ButtonBase--wide-s--is-icon-button-size-medium_196be_715","ButtonBase--wide-s--size-small":"_ButtonBase--wide-s--size-small_196be_720","ButtonBase--wide-s--is-icon-button-size-small":"_ButtonBase--wide-s--is-icon-button-size-small_196be_729","ButtonBase--wide-l--size-xs":"_ButtonBase--wide-l--size-xs_196be_736","ButtonBase--wide-l--is-icon-button-size-xs":"_ButtonBase--wide-l--is-icon-button-size-xs_196be_745","ButtonBase--wide-l--size-s":"_ButtonBase--wide-l--size-s_196be_750","ButtonBase--wide-l--is-icon-button-size-s":"_ButtonBase--wide-l--is-icon-button-size-s_196be_759","ButtonBase--wide-l--size-m":"_ButtonBase--wide-l--size-m_196be_764","ButtonBase--wide-l--is-icon-button-size-m":"_ButtonBase--wide-l--is-icon-button-size-m_196be_773","ButtonBase--wide-l--size-l":"_ButtonBase--wide-l--size-l_196be_778","ButtonBase--wide-l--is-icon-button-size-l":"_ButtonBase--wide-l--is-icon-button-size-l_196be_787","ButtonBase--wide-l--size-xl":"_ButtonBase--wide-l--size-xl_196be_792","ButtonBase--wide-l--is-icon-button-size-xl":"_ButtonBase--wide-l--is-icon-button-size-xl_196be_801","ButtonBase--wide-l--size-large":"_ButtonBase--wide-l--size-large_196be_806","ButtonBase--wide-l--is-icon-button-size-large":"_ButtonBase--wide-l--is-icon-button-size-large_196be_815","ButtonBase--wide-l--size-medium":"_ButtonBase--wide-l--size-medium_196be_820","ButtonBase--wide-l--is-icon-button-size-medium":"_ButtonBase--wide-l--is-icon-button-size-medium_196be_829","ButtonBase--wide-l--size-small":"_ButtonBase--wide-l--size-small_196be_834","ButtonBase--wide-l--is-icon-button-size-small":"_ButtonBase--wide-l--is-icon-button-size-small_196be_843","ButtonBase--variant-primary":"_ButtonBase--variant-primary_196be_849","ButtonBase--variant-primary--dsInternalSimulation-hover":"_ButtonBase--variant-primary--dsInternalSimulation-hover_196be_855","ButtonBase--variant-primary--dsInternalSimulation-active":"_ButtonBase--variant-primary--dsInternalSimulation-active_196be_870","ButtonBase--variant-secondary":"_ButtonBase--variant-secondary_196be_874","ButtonBase--variant-secondary--dsInternalSimulation-hover":"_ButtonBase--variant-secondary--dsInternalSimulation-hover_196be_880","ButtonBase--variant-secondary--dsInternalSimulation-active":"_ButtonBase--variant-secondary--dsInternalSimulation-active_196be_895","ButtonBase--variant-tertiary":"_ButtonBase--variant-tertiary_196be_899","ButtonBase--variant-tertiary--dsInternalSimulation-hover":"_ButtonBase--variant-tertiary--dsInternalSimulation-hover_196be_905","ButtonBase--variant-tertiary--dsInternalSimulation-active":"_ButtonBase--variant-tertiary--dsInternalSimulation-active_196be_920","ButtonBase--variant-quaternary":"_ButtonBase--variant-quaternary_196be_924","ButtonBase--variant-quaternary--dsInternalSimulation-hover":"_ButtonBase--variant-quaternary--dsInternalSimulation-hover_196be_930","ButtonBase--variant-quaternary--dsInternalSimulation-active":"_ButtonBase--variant-quaternary--dsInternalSimulation-active_196be_945","ButtonBase--variant-ghost":"_ButtonBase--variant-ghost_196be_949","ButtonBase--variant-ghost--dsInternalSimulation-hover":"_ButtonBase--variant-ghost--dsInternalSimulation-hover_196be_955","ButtonBase--variant-ghost--dsInternalSimulation-active":"_ButtonBase--variant-ghost--dsInternalSimulation-active_196be_970","ButtonBase--variant-ghost--is-selected":"_ButtonBase--variant-ghost--is-selected_196be_974","ButtonBase--variant-plain":"_ButtonBase--variant-plain_196be_978","ButtonBase--variant-plain--dsInternalSimulation-hover":"_ButtonBase--variant-plain--dsInternalSimulation-hover_196be_984","ButtonBase--variant-plain--dsInternalSimulation-active":"_ButtonBase--variant-plain--dsInternalSimulation-active_196be_999","ButtonBase--variant-dangerous":"_ButtonBase--variant-dangerous_196be_1003","ButtonBase--variant-dangerous--dsInternalSimulation-hover":"_ButtonBase--variant-dangerous--dsInternalSimulation-hover_196be_1009","ButtonBase--variant-dangerous--dsInternalSimulation-active":"_ButtonBase--variant-dangerous--dsInternalSimulation-active_196be_1024","ButtonBase--variant-critical":"_ButtonBase--variant-critical_196be_1028","ButtonBase--variant-critical--dsInternalSimulation-hover":"_ButtonBase--variant-critical--dsInternalSimulation-hover_196be_1034","ButtonBase--variant-critical--dsInternalSimulation-active":"_ButtonBase--variant-critical--dsInternalSimulation-active_196be_1049","ButtonBase--variant-onColor":"_ButtonBase--variant-onColor_196be_1053","ButtonBase--variant-onColor--dsInternalSimulation-hover":"_ButtonBase--variant-onColor--dsInternalSimulation-hover_196be_1059","ButtonBase--variant-onColor--dsInternalSimulation-active":"_ButtonBase--variant-onColor--dsInternalSimulation-active_196be_1074","ButtonBase--variant-classroom":"_ButtonBase--variant-classroom_196be_1078","ButtonBase--variant-classroom--dsInternalSimulation-hover":"_ButtonBase--variant-classroom--dsInternalSimulation-hover_196be_1084","ButtonBase--variant-classroom--dsInternalSimulation-active":"_ButtonBase--variant-classroom--dsInternalSimulation-active_196be_1099","ButtonBase--variant-classroom--is-selected":"_ButtonBase--variant-classroom--is-selected_196be_1103","ButtonBase--variant-primaryB2b":"_ButtonBase--variant-primaryB2b_196be_1107","ButtonBase--variant-primaryB2b--dsInternalSimulation-hover":"_ButtonBase--variant-primaryB2b--dsInternalSimulation-hover_196be_1113","ButtonBase--variant-primaryB2b--dsInternalSimulation-active":"_ButtonBase--variant-primaryB2b--dsInternalSimulation-active_196be_1128","ButtonBase--variant-primaryTutor":"_ButtonBase--variant-primaryTutor_196be_1132","ButtonBase--variant-primaryTutor--dsInternalSimulation-hover":"_ButtonBase--variant-primaryTutor--dsInternalSimulation-hover_196be_1138","ButtonBase--variant-primaryTutor--dsInternalSimulation-active":"_ButtonBase--variant-primaryTutor--dsInternalSimulation-active_196be_1153","ButtonBase--variant-inverted":"_ButtonBase--variant-inverted_196be_1157","ButtonBase--variant-inverted--dsInternalSimulation-hover":"_ButtonBase--variant-inverted--dsInternalSimulation-hover_196be_1163","ButtonBase--variant-inverted--dsInternalSimulation-active":"_ButtonBase--variant-inverted--dsInternalSimulation-active_196be_1178","ButtonBase--variant-newFeature":"_ButtonBase--variant-newFeature_196be_1182","ButtonBase--variant-newFeature--dsInternalSimulation-hover":"_ButtonBase--variant-newFeature--dsInternalSimulation-hover_196be_1188","ButtonBase--variant-newFeature--dsInternalSimulation-active":"_ButtonBase--variant-newFeature--dsInternalSimulation-active_196be_1203","ButtonBase--variant-ai":"_ButtonBase--variant-ai_196be_1207","ButtonBase--variant-ai--dsInternalSimulation-hover":"_ButtonBase--variant-ai--dsInternalSimulation-hover_196be_1213","ButtonBase--variant-ai--dsInternalSimulation-active":"_ButtonBase--variant-ai--dsInternalSimulation-active_196be_1228","ButtonBase--no-wrap":"_ButtonBase--no-wrap_196be_1240"},h="ButtonBase",te=e=>Object.prototype.hasOwnProperty.call(e,"selected"),v=({children:e,busy:n})=>{const a=[...f(p,h,["content"])],s=[...f(p,h,["busy"])];return t.jsxs(t.Fragment,{children:[t.jsx("span",{className:a.join(" "),children:e}),n&&t.jsx("span",{className:s.join(" "),children:t.jsx(M,{})})]})},y=e=>{const{variant:n=D,size:a=F,fullWidth:s=!1,wrap:l=!1,href:r,download:m,opensInNewTab:b,nofollow:B,submitsForm:R,assistiveText:k,onClick:c,disabled:d,busy:i,isIconButton:I,as:S,url:U,a11yLabel:L,dataset:O,children:w,dsInternalSimulation:P,preplyDsComponent:A}=e,{selected:W}=te(e)?e:{selected:void 0},H=X(),g=N.useRef(null),$=o=>{(d||i)&&o.preventDefault(),c==null||c(o)},K=o=>{var T;const V=Y(o.key);(V===" "||V==="Enter")&&(o.preventDefault(),(T=g.current)==null||T.click())},J=Z(p,h,[_(`variant-${n}--dsInternalSimulation`,P),_("variant",n),_("size",a),I?_("is-icon-button-size",a):[],u(void 0,"no-wrap",l),u("width-full","width-auto",s),u("is-busy",void 0,i),u("is-icon-button",void 0,I),u(`variant-${n}--is-selected`,void 0,W)]),x={...G(O,{preplyDsComponent:A}),className:J.join(" "),"aria-label":k||L,onClick:$,disabled:d,"aria-disabled":d||i?!0:void 0},z=r||U,q={...x,download:m,ref:g,role:"button",tabIndex:d?-1:0,href:z,onKeyDown:K};return z?t.jsx("a",{...q,...Q(H,z,b,B),children:v({children:w,busy:i})}):S?N.cloneElement(S,{...q},v({children:w,busy:i})):t.jsx("button",{...x,type:R?"submit":"button",children:v({children:w,busy:i})})};try{y.displayName="ButtonBase",y.__docgenInfo={description:"",displayName:"ButtonBase",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"ButtonVariant | undefined"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"Responsive<ButtonSize> | undefined"}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"Responsive<boolean> | undefined"}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"boolean | undefined"}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"string | undefined"}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"boolean | undefined"}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"boolean | undefined"}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"boolean | undefined"}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"boolean | undefined"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<Element> | undefined"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"boolean | undefined"}},isIconButton:{defaultValue:null,description:"",name:"isIconButton",required:!0,type:{name:"boolean"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>> | undefined"}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"string | undefined"}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"string | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},dsInternalSimulation:{defaultValue:null,description:"@deprecated This is meant for internal DS usage only. Do not use it in your code.",name:"dsInternalSimulation",required:!1,type:{name:'"hover" | "active" | "focus" | undefined'}},preplyDsComponent:{defaultValue:null,description:"@see getDatasetProps",name:"preplyDsComponent",required:!0,type:{name:"string"}},selected:{defaultValue:null,description:"",name:"selected",required:!1,type:{name:"boolean | undefined"}}}}}catch{}const ne={"Button--icon":"_Button--icon_1fyz9_5"},j=({variant:e=D,size:n=F,url:a,a11yLabel:s,leadingSvgIcon:l,trailingSvgIcon:r,children:m,...b})=>{const B=[...f(ne,E.Button,["icon"])];return t.jsxs(y,{...b,isIconButton:!1,variant:e,size:n,url:a,a11yLabel:s,preplyDsComponent:E.Button,children:[!!l&&t.jsx("span",{className:B.join(" "),children:C(l,{"aria-hidden":"true",focusable:"false"})}),m,!!r&&t.jsx("span",{className:B.join(" "),children:C(r,{"aria-hidden":"true",focusable:"false"})})]})};try{j.displayName="Button",j.__docgenInfo={description:"",displayName:"Button",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"Responsive<ButtonSize> | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"ButtonVariant | undefined"}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"string | undefined"}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"boolean | undefined"}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"boolean | undefined"}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"boolean | undefined"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<Element> | undefined"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>> | undefined"}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"string | undefined"}},dsInternalSimulation:{defaultValue:null,description:"@deprecated This is meant for internal DS usage only. Do not use it in your code.",name:"dsInternalSimulation",required:!1,type:{name:'"hover" | "active" | "focus" | undefined'}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"Responsive<boolean> | undefined"}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"boolean | undefined"}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"boolean | undefined"}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"boolean | undefined"}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"string | undefined"}},leadingSvgIcon:{defaultValue:null,description:"",name:"leadingSvgIcon",required:!1,type:{name:"SvgComponentOrElement | undefined"}},trailingSvgIcon:{defaultValue:null,description:"",name:"trailingSvgIcon",required:!1,type:{name:"SvgComponentOrElement | undefined"}}}}}catch{}export{y as B,j as a};
|