@privy-io/react-auth
Version:
React client for the Privy Auth API
54 lines (50 loc) • 1.56 kB
JavaScript
;var e=require("react/jsx-runtime"),r=require("styled-components");r.styled.label`
&& {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
text-align: left;
border-radius: 0.5rem;
border: 1px solid var(--privy-color-foreground-4);
width: 100%;
}
`;let i=r.styled.div`
display: inline-block;
vertical-align: middle;
`,o=r.styled.svg`
fill: none;
stroke: white;
stroke-width: 3px;
`,l=r.styled.input.attrs({type:"checkbox"})`
border: 0;
clip: rect(0 0 0 0);
clippath: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
`,s=r.styled.div`
display: inline-block;
width: 18px;
height: 18px;
transition: all 150ms;
cursor: pointer;
border-color: ${e=>e.color};
border-radius: 3px;
background: ${e=>e.checked?e.color:"var(--privy-color-background)"};
&& {
/* This is necessary to override css reset for border width */
border-width: 1px;
}
${l}:focus + & {
box-shadow: 0 0 0 1px ${e=>e.color};
}
${o} {
visibility: ${e=>e.checked?"visible":"hidden"};
}
`;exports.Checkbox=({className:r,checked:d,color:t="var(--privy-color-accent)",...c})=>/*#__PURE__*/e.jsx("label",{children:/*#__PURE__*/e.jsxs(i,{className:r,children:[/*#__PURE__*/e.jsx(l,{checked:d,...c}),/*#__PURE__*/e.jsx(s,{color:t,checked:d,children:/*#__PURE__*/e.jsx(o,{viewBox:"0 0 24 24",children:/*#__PURE__*/e.jsx("polyline",{points:"20 6 9 17 4 12"})})})]})});