@privy-io/react-auth/dist/esm/Checkbox-BhNoOKjX.mjs

React client for the Privy Auth API

import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as i}from"styled-components";const o=({className:i,checked:o,color:s="var(--privy-color-accent)",...n})=>/*#__PURE__*/e("label",{children:/*#__PURE__*/r(l,{className:i,children:[/*#__PURE__*/e(d,{checked:o,...n}),/*#__PURE__*/e(t,{color:s,checked:o,children:/*#__PURE__*/e(c,{viewBox:"0 0 24 24",children:/*#__PURE__*/e("polyline",{points:"20 6 9 17 4 12"})})})]})});i.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 l=i.div`
  display: inline-block;
  vertical-align: middle;
`,c=i.svg`
  fill: none;
  stroke: white;
  stroke-width: 3px;
`,d=i.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;
`,t=i.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;
  }

  ${d}:focus + & {
    box-shadow: 0 0 0 1px ${e=>e.color};
  }

  ${c} {
    visibility: ${e=>e.checked?"visible":"hidden"};
  }
`;export{o as C};