@frank-auth/react/dist/cjs/components/ui/alert/alert.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),k=require("../../../theme/context.cjs"),d=require("../../../theme/styled.cjs"),s=require("@emotion/react"),S=require("@emotion/styled"),R=require("react"),u=e=>e&&e.__esModule?e:{default:e},l=u(S),I=u(R),V=e=>{const{theme:r,variant:i="flat",color:n="primary"}=e,o=d.getColorVariant(r,n,500),a=d.getColorVariant(r,n,50),h=d.getColorVariant(r,n,200);switch(i){case"solid":return s.css`
        background-color: ${o};
        color: ${r.colors.text.inverse};
        border: 1px solid ${o};
      `;case"bordered":return s.css`
        background-color: ${r.colors.background.primary};
        color: ${o};
        border: 1px solid ${o};
      `;case"light":return s.css`
        background-color: ${a};
        color: ${d.getColorVariant(r,n,700)};
        border: 1px solid transparent;
      `;case"flat":return s.css`
        background-color: ${d.getColorVariant(r,n,100)};
        color: ${o};
        border: 1px solid ${h};
      `;default:return s.css``}},_=e=>{const{theme:r,radius:i="md"}=e;switch(i){case"none":return s.css`border-radius: ${r.borderRadius.none};`;case"sm":return s.css`border-radius: ${r.borderRadius.sm};`;case"md":return s.css`border-radius: ${r.borderRadius.md};`;case"lg":return s.css`border-radius: ${r.borderRadius.lg};`;case"xl":return s.css`border-radius: ${r.borderRadius.xl};`;default:return s.css`border-radius: ${r.borderRadius.md};`}},q=l.default.div`
  display: ${e=>e.isVisible===!1?"none":"flex"};
  align-items: flex-start;
  gap: ${e=>e.theme.spacing[3]};
  padding: ${e=>e.theme.spacing[4]};
  position: relative;
  transition: all ${e=>e.theme.transitions.normal};

  ${V}
  ${_}

  /* Custom CSS prop */
  ${e=>e.css}
`,A=l.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
`,B=l.default.div`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[1]};
  flex: 1;
  min-width: 0;
`,M=l.default.div`
  font-weight: ${e=>e.theme.fontWeights.semibold};
  font-size: ${e=>e.theme.fontSizes.base};
  line-height: ${e=>e.theme.lineHeights.tight};
`,W=l.default.div`
  font-size: ${e=>e.theme.fontSizes.sm};
  line-height: ${e=>e.theme.lineHeights.normal};
  opacity: 0.9;
`,L=l.default.button`
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
  opacity: 0.7;
  transition: opacity ${e=>e.theme.transitions.fast};
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;

  &:hover {
    opacity: 1;
  }

  &:focus {
    outline: none;
  }
`,D=()=>t.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:"20",height:"20",children:t.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})}),T=()=>t.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:"20",height:"20",children:t.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"})}),H=()=>t.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:"20",height:"20",children:t.jsx("path",{d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"})}),P=()=>t.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:"20",height:"20",children:t.jsx("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"})}),E=()=>t.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",width:"18",height:"18",children:[t.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),N=e=>{switch(e){case"success":return t.jsx(D,{});case"warning":return t.jsx(H,{});case"danger":return t.jsx(P,{});default:return t.jsx(T,{})}},g=I.default.forwardRef(({children:e,variant:r="flat",color:i="primary",radius:n="md",title:o,description:a,icon:h,hideIcon:x=!1,isClosable:f=!1,onClose:p,isVisible:m=!0,className:b,css:$,...v},y)=>{const{theme:c}=k.useTheme(),C={...v,variant:r,color:i,radius:n,isVisible:m,className:b,css:$},j=()=>{p?.()},w=h||N(i),z=o||a||e;return t.jsxs(q,{theme:c,ref:y,...C,children:[!x&&t.jsx(A,{children:w}),z&&t.jsxs(B,{theme:c,children:[o&&t.jsx(M,{theme:c,children:o}),a&&t.jsx(W,{theme:c,children:a}),e]}),f&&t.jsx(L,{theme:c,onClick:j,"aria-label":"Close alert",children:t.jsx(E,{})})]})});g.displayName="Alert";exports.Alert=g;
//# sourceMappingURL=alert.cjs.map