{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Alert/index.tsx", "../javascripts/styled-components/components/Alert/wrapper.tsx"],
  "sourcesContent": ["import React from 'react';\n\nimport { IconCheck, IconClose, IconExclamation, IconInfo } from '../Icon';\nimport {\n  CloseButton,\n  FloatingAlertWrapper,\n  FloatingInner,\n  Heading,\n  Icon,\n  IconBadge,\n  Main,\n  UiBlock,\n  Wrapper,\n} from './wrapper';\n\nexport interface IAlert {\n  children: React.ReactNode;\n  heading?: string;\n  tone?: 'success' | 'warning' | 'error' | 'info';\n}\n\nconst getIcon = (tone: string) => {\n  switch (tone) {\n    case 'success':\n      return <IconCheck />;\n    case 'warning':\n    case 'error':\n      return <IconExclamation />;\n    default:\n      return <IconInfo />;\n  }\n};\n\nconst Alert = ({ children, heading, tone }: IAlert) => (\n  <Wrapper $tone={tone}>\n    <Icon>\n      <IconBadge>{getIcon(tone || '')}</IconBadge>\n    </Icon>\n    <Main>\n      {heading && <Heading>{heading}</Heading>}\n      {children}\n    </Main>\n  </Wrapper>\n);\n\nexport default Alert;\n\ninterface IFloatingAlert extends IAlert {\n  onClose: () => void;\n}\n\nexport const FloatingAlert = ({ children, heading, tone, onClose }: IFloatingAlert) => (\n  <FloatingAlertWrapper>\n    <UiBlock onClick={onClose} />\n    <FloatingInner>\n      <Alert {...{ children, heading, tone }} />\n      <CloseButton onClick={onClose}>\n        <IconClose />\n      </CloseButton>\n    </FloatingInner>\n  </FloatingAlertWrapper>\n);\n", "import styled, { css, keyframes } from 'styled-components';\n\nimport { size } from '../../layout/helpers';\nimport { ButtonReset } from '../../layout/reset';\n\nconst iconSize = size(3);\nconst textSize = '0.875rem';\nconst textLineHeight = '1.5';\n\nexport const IconBadge = styled.div.withConfig({ componentId: 'sc-usm8td-0' })`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: ${iconSize};\n    height: ${iconSize};\n    margin-top: calc((${iconSize} - ${textSize} * ${textLineHeight}) / -2);\n    border-radius: 50%;\n    font-size: 1rem;\n`;\n\ninterface WrapperProps {\n  $tone?: 'success' | 'warning' | 'error' | 'info';\n}\n\nexport const Wrapper = styled.div.withConfig({ componentId: 'sc-usm8td-1' })<WrapperProps>`\n    --alert-bg: var(--c-semantic-neutral-300);\n    --alert-fg: var(--c-text-main);\n    --alert-icon-bg: var(--c-semantic-neutral-500);\n    --alert-icon-fg: var(--c-semantic-neutral-100);\n\n    display: flex;\n    padding: ${size(2)} ${size(3)};\n    background-color: var(--alert-bg);\n    color: var(--alert-fg);\n    border-radius: ${(props) => props.theme.size.borderRadius};\n\n    ${IconBadge} {\n        background-color: var(--alert-icon-bg);\n        color: var(--alert-icon-fg);\n    }\n\n    ${({ $tone }) =>\n      $tone === 'success'\n        ? css`\n                  --alert-bg: var(--c-semantic-success-100);\n                  --alert-icon-bg: var(--c-semantic-success-300);\n                  --alert-icon-fg: var(--c-semantic-success-700);\n              `\n        : $tone === 'warning'\n          ? css`\n                  --alert-bg: var(--c-semantic-warning-100);\n                  --alert-icon-bg: var(--c-semantic-warning-300);\n                  --alert-icon-fg: var(--c-semantic-warning-700);\n              `\n          : $tone === 'error'\n            ? css`\n                  --alert-bg: var(--c-semantic-error-100);\n                  --alert-icon-bg: var(--c-semantic-error-300);\n                  --alert-icon-fg: var(--c-semantic-error-700);\n              `\n            : $tone === 'info'\n              ? css`\n                  --alert-bg: var(--c-semantic-info-100);\n                  --alert-icon-bg: var(--c-semantic-info-300);\n                  --alert-icon-fg: var(--c-semantic-info-700);\n              `\n              : undefined}\n`;\n\nexport const Icon = styled.div.withConfig({ componentId: 'sc-usm8td-2' })`\n    flex-shrink: 0;\n    padding-right: ${size(1.5)};\n`;\n\nexport const Main = styled.div.withConfig({ componentId: 'sc-usm8td-3' })`\n    flex: 1 1 auto;\n    font-size: ${textSize};\n    line-height: ${textLineHeight};\n`;\n\nexport const Heading = styled.div.withConfig({ componentId: 'sc-usm8td-4' })`\n    font-weight: var(--font-weight-medium);\n    margin-bottom: ${size(1)};\n`;\n\nexport const FloatingAlertWrapper = styled.div.withConfig({ componentId: 'sc-usm8td-5' })`\n    position: fixed;\n    inset: 0;\n    padding: ${(props) => props.theme.size.containerGutterLtMd};\n    z-index: ${(props) => props.theme.zIndex.floatingAlert};\n\n    ${(props) => props.theme.breakpoint.Md} {\n        padding: ${(props) => props.theme.size.containerGutter};\n    }\n`;\n\nexport const FloatingInner = styled.div.withConfig({ componentId: 'sc-usm8td-6' })`\n    position: relative;\n    z-index: 1;\n    max-width: calc(\n        ${(props) => props.theme.size.containerMaxWidth} - (${(props) => props.theme.size.containerGutter} * 2)\n    );\n    margin: 0 auto;\n    animation: ${keyframes`\n        from {\n            transform: scale(0.95);\n            opacity: 0.5;\n        }\n        to {\n            transform: scale(1);\n            opacity: 1;\n        }\n    `} 150ms linear;\n`;\n\nexport const CloseButton = styled(ButtonReset).withConfig({ componentId: 'sc-usm8td-7' })`\n    position: absolute;\n    top: ${size(2)};\n    right: ${size(2)};\n    z-index: 50;\n`;\n\nexport const UiBlock = styled.div.withConfig({ componentId: 'sc-usm8td-8' })`\n    background-color: rgba(0, 0, 0, 0.25);\n    position: fixed;\n    inset: 0;\n    animation: ${keyframes`\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n    `} 150ms linear;\n`;\n"],
  "mappings": "6OAAA,IAAAA,EAAkB,SCKlB,IAAMC,EAAWC,EAAK,CAAC,EACjBC,EAAW,WACXC,EAAiB,MAEVC,EAAYC,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA;AAAA,aAIhEL,CAAQ;AAAA,cACPA,CAAQ;AAAA,wBACEA,CAAQ,MAAME,CAAQ,MAAMC,CAAc;AAAA;AAAA;AAAA,EASrDG,EAAUD,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO5DJ,EAAK,CAAC,CAAC,IAAIA,EAAK,CAAC,CAAC;AAAA;AAAA;AAAA,qBAGXM,GAAUA,EAAM,MAAM,KAAK,YAAY;AAAA;AAAA,MAEvDH,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,CAAC,CAAE,MAAAI,CAAM,IACTA,IAAU,UACNC;AAAA;AAAA;AAAA;AAAA,gBAKAD,IAAU,UACRC;AAAA;AAAA;AAAA;AAAA,gBAKAD,IAAU,QACRC;AAAA;AAAA;AAAA;AAAA,gBAKAD,IAAU,OACRC;AAAA;AAAA;AAAA;AAAA,gBAKA,MAAS;AAAA,EAGZC,EAAOL,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA,qBAEnDJ,EAAK,GAAG,CAAC;AAAA,EAGjBU,EAAON,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA,iBAEvDH,CAAQ;AAAA,mBACNC,CAAc;AAAA,EAGpBS,EAAUP,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA,qBAEtDJ,EAAK,CAAC,CAAC;AAAA,EAGfY,EAAuBR,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA,eAGxEE,GAAUA,EAAM,MAAM,KAAK,mBAAmB;AAAA,eAC9CA,GAAUA,EAAM,MAAM,OAAO,aAAa;AAAA;AAAA,MAEnDA,GAAUA,EAAM,MAAM,WAAW,EAAE;AAAA,mBACtBA,GAAUA,EAAM,MAAM,KAAK,eAAe;AAAA;AAAA,EAIjDO,EAAgBT,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA;AAAA,UAItEE,GAAUA,EAAM,MAAM,KAAK,iBAAiB,OAAQA,GAAUA,EAAM,MAAM,KAAK,eAAe;AAAA;AAAA;AAAA,iBAGxFQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASZ;AAAA,EAGQC,EAAcX,EAAOY,CAAW,EAAE,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA,WAE7EhB,EAAK,CAAC,CAAC;AAAA,aACLA,EAAK,CAAC,CAAC;AAAA;AAAA,EAIPiB,EAAUb,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI1DU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOZ;EDhHL,IAAMI,EAAWC,GAAiB,CAChC,OAAQA,EAAM,CACZ,IAAK,UACH,OAAO,EAAAC,QAAA,cAACC,EAAA,IAAU,EACpB,IAAK,UACL,IAAK,QACH,OAAO,EAAAD,QAAA,cAACE,EAAA,IAAgB,EAC1B,QACE,OAAO,EAAAF,QAAA,cAACG,EAAA,IAAS,CACrB,CACF,EAEMC,EAAQ,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,KAAAP,CAAK,IACvC,EAAAC,QAAA,cAACO,EAAA,CAAQ,MAAOR,GACd,EAAAC,QAAA,cAACQ,EAAA,KACC,EAAAR,QAAA,cAACS,EAAA,KAAWX,EAAQC,GAAQ,EAAE,CAAE,CAClC,EACA,EAAAC,QAAA,cAACU,EAAA,KACEJ,GAAW,EAAAN,QAAA,cAACW,EAAA,KAASL,CAAQ,EAC7BD,CACH,CACF,EAGKO,EAAQR,EAMFS,EAAgB,CAAC,CAAE,SAAAR,EAAU,QAAAC,EAAS,KAAAP,EAAM,QAAAe,CAAQ,IAC/D,EAAAd,QAAA,cAACe,EAAA,KACC,EAAAf,QAAA,cAACgB,EAAA,CAAQ,QAASF,EAAS,EAC3B,EAAAd,QAAA,cAACiB,EAAA,KACC,EAAAjB,QAAA,cAACI,EAAA,CAAY,SAAAC,EAAU,QAAAC,EAAS,KAAAP,EAAQ,EACxC,EAAAC,QAAA,cAACkB,EAAA,CAAY,QAASJ,GACpB,EAAAd,QAAA,cAACmB,EAAA,IAAU,CACb,CACF,CACF",
  "names": ["import_react", "iconSize", "size", "textSize", "textLineHeight", "IconBadge", "dt", "Wrapper", "props", "$tone", "lt", "Icon", "Main", "Heading", "FloatingAlertWrapper", "FloatingInner", "mt", "CloseButton", "ButtonReset", "UiBlock", "getIcon", "tone", "React", "IconCheck", "IconExclamation", "IconInfo", "Alert", "children", "heading", "Wrapper", "Icon", "IconBadge", "Main", "Heading", "Alert_default", "FloatingAlert", "onClose", "FloatingAlertWrapper", "UiBlock", "FloatingInner", "CloseButton", "IconClose"]
}