Skip to content

Commit 5926ed8

Browse files
author
GH Pages Bot
committed
Deploy Storybook to GitHub Pages
0 parents  commit 5926ed8

File tree

434 files changed

+92390
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

434 files changed

+92390
-0
lines changed

‎assets/Box-25b20e59.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import{j as n}from"./jsx-runtime-9bc08dc0.js";import{u as l}from"./index-644e6ca5.js";import{M as a,C as t,S as r,A as d}from"./blocks-73b837ef.js";import{r as c}from"./index-96de27d2.js";import{B as o,T as x,M as h,G as p,O as m}from"./Box.stories-369027e3.js";import"./iframe-4f74be7d.js";import"./index-7fca0192.js";import"./stories-ea1afc6b.js";import"./SpacingStyles-fd6851ab.js";import"./index-acc983e6.js";import"./index.esm-4eff26c2.js";import"./TextStyles-5ade3741.js";import"./helpers-ed7a2f24.js";import"./Color-0aa54fb0.js";import"./Sizing-35dbcd46.js";function i(e){const s={code:"code",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...l(),...e.components};return n.jsxs(n.Fragment,{children:[n.jsx(a,{of:o}),`
2+
`,n.jsx(s.h1,{id:"box",children:"Box"}),`
3+
`,n.jsx(s.p,{children:"Most abstract layout component for applying simple styling."}),`
4+
`,n.jsxs(s.p,{children:["By default, it's rendered as ",n.jsx(s.code,{children:"<div>"})," (this can be overridden by an ",n.jsx(s.code,{children:"element"})," prop), and it accepts following groups of props:"]}),`
5+
`,n.jsxs(s.ul,{children:[`
6+
`,n.jsxs(s.li,{children:[`
7+
`,n.jsx(c,{kind:"Docs / Margin & Padding",children:"margin & padding"}),`
8+
`]}),`
9+
`,n.jsxs(s.li,{children:[`
10+
`,n.jsx("a",{href:"https://styled-system.com/table#layout",target:"_blank",children:n.jsx(s.p,{children:"layout"})}),`
11+
`]}),`
12+
`,n.jsxs(s.li,{children:[`
13+
`,n.jsx("a",{href:"https://styled-system.com/table#flexbox",target:"_blank",children:n.jsx(s.p,{children:"flexbox"})}),`
14+
`]}),`
15+
`,n.jsxs(s.li,{children:[`
16+
`,n.jsx("a",{href:"https://styled-system.com/table#grid",target:"_blank",children:n.jsx(s.p,{children:"grid"})}),`
17+
`]}),`
18+
`,n.jsxs(s.li,{children:[`
19+
`,n.jsx("a",{href:"https://styled-system.com/table#background",target:"_blank",children:n.jsx(s.p,{children:"background"})}),`
20+
`]}),`
21+
`,n.jsxs(s.li,{children:[`
22+
`,n.jsx("a",{href:"https://styled-system.com/table#position",target:"_blank",children:n.jsx(s.p,{children:"position"})}),`
23+
`]}),`
24+
`,n.jsxs(s.li,{children:[`
25+
`,n.jsx("a",{href:"https://styled-system.com/table#color",target:"_blank",children:n.jsx(s.p,{children:"color"})}),`
26+
`]}),`
27+
`,n.jsx(s.li,{children:n.jsx(s.code,{children:"textAlign"})}),`
28+
`]}),`
29+
`,n.jsx(s.p,{children:n.jsx(s.strong,{children:"NOTE: It is important not to overuse this component! Please allow maximum of around 6 props and then consider using dedicated styled component."})}),`
30+
`,n.jsx(t,{children:n.jsx(r,{of:x})}),`
31+
`,n.jsx(t,{children:n.jsx(r,{of:h})}),`
32+
`,n.jsx(t,{children:n.jsx(r,{of:p})}),`
33+
`,n.jsx(t,{children:n.jsx(r,{of:m})}),`
34+
`,n.jsx(d,{of:o})]})}function w(e={}){const{wrapper:s}={...l(),...e.components};return s?n.jsx(s,{...e,children:n.jsx(i,{...e})}):i(e)}export{w as default};

‎assets/Box.stories-369027e3.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import{e as r}from"./iframe-4f74be7d.js";import{m as S,p as w}from"./stories-ea1afc6b.js";import{B as e}from"./index-acc983e6.js";const b={title:"components / Box",component:e,argTypes:{...S,...w,gap:{control:"text"},rowGap:{control:"text"},columnGap:{control:"text"}}},o={render:y=>r.createElement(e,{...y,textAlign:"center"},"Text centered")},n={render:()=>r.createElement(e,{ml:"xxl",py:20},"Content with margin and padding")},t={render:()=>r.createElement(e,{display:"flex",flexWrap:"wrap",columnGap:"s",rowGap:40},r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"),r.createElement(e,{px:"s",py:"xxs",border:"1px solid maroon",flexShrink:"0"},"Content with gaps"))},s={render:()=>r.createElement(e,{opacity:"0.5",position:"relative",left:"12px"},"Other CSS attributes")};var x,a,p;o.parameters={...o.parameters,docs:{...(x=o.parameters)==null?void 0:x.docs,source:{originalSource:`{
2+
render: args => <Box {...args} textAlign="center">
3+
Text centered
4+
</Box>
5+
}`,...(p=(a=o.parameters)==null?void 0:a.docs)==null?void 0:p.source}}};var i,l,d;n.parameters={...n.parameters,docs:{...(i=n.parameters)==null?void 0:i.docs,source:{originalSource:`{
6+
render: () => <Box ml="xxl" py={20}>
7+
Content with margin and padding
8+
</Box>
9+
}`,...(d=(l=n.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var m,c,g;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`{
10+
render: () => <Box display="flex" flexWrap="wrap" columnGap="s" rowGap={40}>
11+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
12+
Content with gaps
13+
</Box>
14+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
15+
Content with gaps
16+
</Box>
17+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
18+
Content with gaps
19+
</Box>
20+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
21+
Content with gaps
22+
</Box>
23+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
24+
Content with gaps
25+
</Box>
26+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
27+
Content with gaps
28+
</Box>
29+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
30+
Content with gaps
31+
</Box>
32+
<Box px="s" py="xxs" border="1px solid maroon" flexShrink="0">
33+
Content with gaps
34+
</Box>
35+
</Box>
36+
}`,...(g=(c=t.parameters)==null?void 0:c.docs)==null?void 0:g.source}}};var h,B,f;s.parameters={...s.parameters,docs:{...(h=s.parameters)==null?void 0:h.docs,source:{originalSource:`{
37+
render: () => <Box opacity="0.5" position="relative" left="12px">
38+
Other CSS attributes
39+
</Box>
40+
}`,...(f=(B=s.parameters)==null?void 0:B.docs)==null?void 0:f.source}}};const u=["TextAlign","MarginPadding","Gap","OtherExamples"],G=Object.freeze(Object.defineProperty({__proto__:null,Gap:t,MarginPadding:n,OtherExamples:s,TextAlign:o,__namedExportsOrder:u,default:b},Symbol.toStringTag,{value:"Module"}));export{G as B,t as G,n as M,s as O,o as T};

‎assets/Button.stories-fbc82fa2.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{e as l}from"./iframe-4f74be7d.js";import{a as d}from"./stories-b401fc5a.js";import{B as i}from"./index-ffd3abf6.js";import"./Color-0aa54fb0.js";import"./IconAlignment-a51119ec.js";import"./index-50bb5899.js";import"./helpers-ed7a2f24.js";import"./SpacingStyles-fd6851ab.js";import"./Sizing-35dbcd46.js";import"./index-c9b66f89.js";import"./index-6882682b.js";import"./colors-3cc0579a.js";import"./ButtonStyles-3d81de0a.js";const _={component:i,argTypes:{...d,disabled:{control:"boolean"}}},e=c=>l.createElement(i,{...c});e.args={children:"Click me"};e.parameters={design:{type:"figma",url:"https://www.figma.com/file/DGocyaQPfb1oOy9eeGPUKQ/Phoenix-Design-System?node-id=895%3A11"}};const r={args:{...e.args},parameters:{...e.parameters}},a={args:{...e.args,icon:"edit"},parameters:{...e.parameters}};var t,o,s;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`{
2+
args: {
3+
...Template.args
4+
},
5+
parameters: {
6+
...Template.parameters
7+
}
8+
}`,...(s=(o=r.parameters)==null?void 0:o.docs)==null?void 0:s.source}}};var m,p,n;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`{
9+
args: {
10+
...Template.args,
11+
icon: 'edit'
12+
},
13+
parameters: {
14+
...Template.parameters
15+
}
16+
}`,...(n=(p=a.parameters)==null?void 0:p.docs)==null?void 0:n.source}}};const E=["Default","WithIcon"];export{r as Default,a as WithIcon,E as __namedExportsOrder,_ as default};

‎assets/ButtonGroup.stories-fb73c104.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import{d as s,e as r}from"./iframe-4f74be7d.js";import{a as u}from"./Sizing-35dbcd46.js";import{B as n}from"./index-ffd3abf6.js";import"./index-c9b66f89.js";import"./index-6882682b.js";import"./colors-3cc0579a.js";import"./SpacingStyles-fd6851ab.js";import"./index-50bb5899.js";import"./helpers-ed7a2f24.js";import"./Color-0aa54fb0.js";import"./ButtonStyles-3d81de0a.js";const f=s.div`
2+
display: inline-flex;
3+
`,B=s.div`
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
width: 1px;
8+
`,h=s.div`
9+
height: 80%;
10+
background: ${({theme:e})=>e.tokens.color.border.primary};
11+
`,z=(e,t)=>r.Children.map(e,o=>o.props.minimal?[o,t]:[o]).flat().slice(0,-1),a=({testId:e="ButtonGroup",children:t,dividers:o,...l})=>{const p=o&&Array.isArray(t)?z(t,r.createElement(B,null,r.createElement(h,null))):t;return r.createElement(f,{...l,"data-testid":e},p)};a.__docgenInfo={description:"",methods:[],displayName:"ButtonGroup",props:{testId:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'ButtonGroup'",computed:!1}},className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"Array",elements:[{name:"JSX.Element"}],raw:"JSX.Element[]"},description:""},dividers:{required:!1,tsType:{name:"boolean"},description:""}}};const S={component:a,argTypes:{size:{control:"radio",options:u}}},i={render:e=>r.createElement(a,{...e},r.createElement(n,{size:e.size,colorTheme:"success",icon:"deposit",mr:"2xs"},"Deposit"),r.createElement(n,{size:e.size,icon:"withdrawal",minimal:!0,colorTheme:"neutral",mr:"2xs"},"Withdraw"),r.createElement(n,{size:e.size,icon:"transfer",minimal:!0,colorTheme:"neutral"},"Transfer")),args:{size:"md",dividers:!1}};var m,c,d;i.parameters={...i.parameters,docs:{...(m=i.parameters)==null?void 0:m.docs,source:{originalSource:`{
12+
render: args => <ButtonGroupComponent {...args}>
13+
<Button size={args.size} colorTheme={'success'} icon="deposit" mr="2xs">
14+
Deposit
15+
</Button>
16+
<Button size={args.size} icon="withdrawal" minimal colorTheme="neutral" mr="2xs">
17+
Withdraw
18+
</Button>
19+
<Button size={args.size} icon="transfer" minimal colorTheme="neutral">
20+
Transfer
21+
</Button>
22+
</ButtonGroupComponent>,
23+
args: {
24+
size: 'md',
25+
dividers: false
26+
}
27+
}`,...(d=(c=i.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};const b=["ButtonGroup"];export{i as ButtonGroup,b as __namedExportsOrder,S as default};

‎assets/ButtonStyles-3d81de0a.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import{S as f,I as $}from"./index-50bb5899.js";import{d as r,l as e}from"./iframe-4f74be7d.js";import{a as d,b as l,c as g}from"./helpers-ed7a2f24.js";import{m as h}from"./SpacingStyles-fd6851ab.js";const m=(n,o,i,a)=>{const s=parseInt(o.tokens.inputButton.sizing.height[n],10),t=Math.max(d(o.tokens.button.fontSize[n])*l(o.tokens.ref.lineHeight.sm),a?d(o.tokens.button.sizing.icon[n]):0),u=i?d(o.tokens.button.borderWidth):0;return e`
2+
min-height: ${o.tokens.inputButton.sizing.height[n]};
3+
font-size: ${o.tokens.button.fontSize[n]};
4+
padding: ${(s-t)/2-u}px
5+
${o.tokens.button.spacing.x[n]};
6+
border-radius: ${o.tokens.inputButton.borderRadius[n]};
7+
`},p=(n,o,i,a,s)=>{const{tokens:t}=n;return i?e`
8+
background: transparent;
9+
color: ${t.color.text[o].primary};
10+
&:hover {
11+
background: ${t.color.background[o].secondary};
12+
}
13+
path {
14+
transition: fill ${t.duration.transition.base};
15+
fill: ${t.color.text[o].primary};
16+
}
17+
&:focus {
18+
box-shadow: 0 0 0 ${t.borderWidth.focus}
19+
${t.color.border.focus};
20+
}
21+
&[disabled] {
22+
color: ${t.color.text[o].disabled};
23+
background: transparent;
24+
}
25+
&[disabled] path {
26+
fill: ${t.color.text[o].disabled};
27+
}
28+
`:s?e`
29+
background: transparent;
30+
color: ${t.color.text[o].primary};
31+
border: ${t.button.borderWidth} solid
32+
${t.color.border[o].primary};
33+
&:hover {
34+
background: ${t.color.background[o].primary};
35+
color: #fff;
36+
path {
37+
fill: #fff;
38+
}
39+
}
40+
path {
41+
transition: fill ${t.duration.transition.base};
42+
fill: ${t.color.text[o].primary};
43+
}
44+
&:focus {
45+
box-shadow: 0 0 0 ${t.borderWidth.focus}
46+
${t.color.border.focus};
47+
}
48+
&[disabled] {
49+
color: ${t.color.text[o].disabled};
50+
border: 1px solid ${t.color.background[o].primaryDisabled};
51+
background: transparent;
52+
}
53+
&[disabled] path {
54+
fill: ${t.color.text[o].disabled};
55+
}
56+
`:a?e`
57+
background: ${t.color.background[o].secondary};
58+
color: ${t.color.text[o].onSecondary};
59+
&:hover {
60+
background: ${t.color.background[o].secondaryInteraction};
61+
}
62+
path {
63+
transition: fill ${t.duration.transition.base};
64+
fill: ${t.color.text[o].onSecondary};
65+
}
66+
&:focus {
67+
box-shadow: 0 0 0 ${t.borderWidth.focus}
68+
${t.color.border.focus};
69+
}
70+
&[disabled] {
71+
color: ${t.color.text[o].disabled};
72+
background: ${t.color.background[o].secondaryDisabled};
73+
}
74+
&[disabled] path {
75+
fill: ${t.color.text[o].disabled};
76+
}
77+
`:e`
78+
background: ${t.color.background[o].primary};
79+
box-shadow: ${g(t.button.boxShadow.primary)};
80+
color: ${t.color.text[o].onPrimary};
81+
&:hover {
82+
background: ${t.color.background[o].primaryInteraction};
83+
color: ${t.color.text[o].onPrimary};
84+
}
85+
path {
86+
transition: fill ${t.duration.transition.base};
87+
fill: ${t.color.text[o].onPrimary};
88+
}
89+
&:focus {
90+
box-shadow: 0 0 0 ${t.borderWidth.focus}
91+
${t.color.border.focus};
92+
}
93+
&[disabled] {
94+
color: ${t.color.background.primary};
95+
background: ${t.color.background[o].primaryDisabled};
96+
}
97+
`},y=n=>e`
98+
// When display: flex is used, LinkButton is stretched 100% and close button is wrapped on the next line in a Notice component
99+
display: inline-flex;
100+
font-family: ${n.tokens.ref.fontFamily.base};
101+
outline: none;
102+
cursor: pointer;
103+
font-style: normal;
104+
font-weight: ${n.tokens.button.fontWeight};
105+
line-height: ${l(n.tokens.ref.lineHeight.sm)};
106+
border: 0;
107+
align-items: center;
108+
justify-content: center;
109+
transition: all 0.3s;
110+
position: relative;
111+
text-decoration: none;
112+
113+
&[disabled] {
114+
cursor: default;
115+
}
116+
`,w=r.div`
117+
display: flex;
118+
align-items: center;
119+
${({$loading:n})=>n?e`
120+
visibility: hidden;
121+
`:e``}
122+
`,c=e`
123+
${n=>y(n.theme)}
124+
${n=>m(n.size,n.theme,n.outline,!!n.icon)}
125+
${n=>p(n.theme,n.colorTheme,n.minimal,n.secondary,n.outline)}
126+
127+
/** These styles are specific for stand-alone component Button */
128+
text-align: ${({icon:n})=>n?"start":"center"};
129+
130+
${h}
131+
`,v=r.button`
132+
${c}
133+
`,W=r.a`
134+
${c}
135+
`,I=r.div`
136+
flex: 1;
137+
display: flex;
138+
${({children:n,icon:o,iconAlignment:i})=>n&&o?i==="left"?e`
139+
margin-inline-start: 0.6em;
140+
`:e`
141+
margin-inline-end: 0.6em;
142+
`:void 0}
143+
`,b=e`
144+
${({theme:n,size:o})=>o?e`
145+
width: ${n.tokens.button.sizing.icon[o]};
146+
height: ${n.tokens.button.sizing.icon[o]};
147+
`:e``}
148+
`,H=r(f)`
149+
${b}
150+
`,C=r($)`
151+
${b}
152+
`,L=r.div`
153+
position: absolute;
154+
left: 0;
155+
top: 0;
156+
width: 100%;
157+
height: 100%;
158+
display: flex;
159+
align-items: center;
160+
justify-content: center;
161+
`;export{v as B,W as L,C as S,m as a,p as b,H as c,L as d,w as e,I as f,y as g};

‎assets/Card.stories-9069db6c.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import{p as s,m as t}from"./stories-ea1afc6b.js";import{C as d}from"./index-ea3c37a1.js";import"./SpacingStyles-fd6851ab.js";import"./iframe-4f74be7d.js";import"./helpers-ed7a2f24.js";import"./Color-0aa54fb0.js";const g={title:"components / Card",component:d,argTypes:{...s,...t,elevated:{control:"boolean"},disabled:{control:"boolean"}}},e={args:{p:"xl",elevated:!0,disabled:!1}};var r,a,o;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`{
2+
args: {
3+
p: 'xl',
4+
elevated: true,
5+
disabled: false
6+
}
7+
}`,...(o=(a=e.parameters)==null?void 0:a.docs)==null?void 0:o.source}}};const u=["Card"];export{e as Card,u as __namedExportsOrder,g as default};

‎assets/Checkbox.stories-fd467191.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/CheckboxRadioStyles-7af94dec.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import{d as i}from"./iframe-4f74be7d.js";import{a as t}from"./helpers-ed7a2f24.js";import{g as n}from"./colors-3cc0579a.js";import{l as a}from"./rtl-8691ffa8.js";const d=i.div`
2+
font-size: 0;
3+
4+
input {
5+
position: absolute;
6+
width: 1px;
7+
height: 1px;
8+
opacity: 0;
9+
}
10+
11+
label {
12+
position: relative;
13+
display: inline-block;
14+
padding-top: ${({size:o,theme:e})=>`${(t(e.tokens.checkboxRadio.sizing[o])-16)/2}px`};
15+
padding-inline-start: ${({theme:o,size:e})=>`${t(o.tokens.checkboxRadio.sizing[e])+8}px`};
16+
min-height: ${({theme:o,size:e})=>o.tokens.checkboxRadio.sizing[e]};
17+
user-select: none;
18+
color: ${({theme:o,warning:e,error:r})=>n(o,"text",e,r)};
19+
}
20+
21+
label::before,
22+
label::after {
23+
position: absolute;
24+
content: '';
25+
}
26+
27+
// Outer box of the fake checkbox/radio
28+
label::before {
29+
height: ${({theme:o,size:e})=>o.tokens.checkboxRadio.sizing[e]};
30+
width: ${({theme:o,size:e})=>o.tokens.checkboxRadio.sizing[e]};
31+
border: 1px solid
32+
${({theme:o,warning:e,error:r})=>n(o,"border",e,r)??o.tokens.color.border.primary};
33+
background: ${({theme:o})=>o.tokens.color.background.primary};
34+
top: 0;
35+
${a(0)}
36+
transition: ${({theme:o})=>`box-shadow ${o.tokens.duration.transition.base}, background-color ${o.tokens.duration.transition.base}, border ${o.tokens.duration.transition.base}`};
37+
box-shadow: 0 0 0 0
38+
${({theme:o})=>o.tokens.color.border.focus};
39+
box-sizing: border-box;
40+
}
41+
42+
label::after {
43+
display: none;
44+
}
45+
46+
label:hover::before {
47+
border: 1px solid
48+
${o=>o.theme.tokens.color.border.primaryInteraction};
49+
}
50+
51+
input:checked {
52+
+ label::after {
53+
display: block;
54+
}
55+
+ label:hover::before {
56+
border-color: ${({theme:o,colorTheme:e})=>o.tokens.color.background[e].primary};
57+
}
58+
}
59+
60+
// Adding focus styles on the outer-box of the fake checkbox
61+
input:focus + label::before {
62+
outline: none;
63+
box-shadow: 0 0 0 2px
64+
${({theme:o})=>o.tokens.color.border.focus};
65+
}
66+
67+
input:disabled {
68+
+ label {
69+
cursor: not-allowed;
70+
color: ${({theme:o})=>o.tokens.color.text.quaternary};
71+
}
72+
+ label::before {
73+
background-color: ${({theme:o})=>o.tokens.color.background.secondary};
74+
border-color: ${({theme:o})=>o.tokens.color.border.secondary};
75+
}
76+
&:checked + label::before {
77+
border-color: ${({theme:o,colorTheme:e})=>o.tokens.color.background[e].primaryDisabled};
78+
}
79+
}
80+
`,k=i.label`
81+
font-size: ${({theme:o})=>o.tokens.fontSize.base};
82+
`;export{d as C,k as L};

0 commit comments

Comments
 (0)