{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Skeleton/index.tsx"],
  "sourcesContent": ["import styled, { css } from 'styled-components';\n\nimport { size } from '../../layout/helpers';\n\nconst skeletonText = css`\n    & + & {\n        margin-top: ${size(0.5)};\n    }\n`;\n\nconst skeletonCircle = css`\n    border-radius: 50%;\n`;\n\ninterface ISkeleton {\n  $variant?: 'text' | 'circle';\n  $width?: number | string;\n  $height?: number | string;\n  $ratio?: number;\n  $inlineBlock?: boolean;\n}\n\nexport const Skeleton = styled.div.withConfig({ componentId: 'sc-cjrwr8-0' })<ISkeleton>`\n    max-width: 100%;\n    background-color: var(--c-skeleton);\n    border-radius: ${(props) => props.theme.size.borderRadius};\n\n    ${({ $width, $height }) =>\n      css`\n            height: ${$height || '1.5em'};\n            width: ${$width || '100%'};\n        `}\n\n    ${({ $ratio }) =>\n      $ratio &&\n      css`\n            width: 100%;\n            height: 0;\n            padding-bottom: ${$ratio * 100}%;\n        `}\n\n  ${({ $variant }) =>\n    $variant &&\n    css`\n            ${$variant === 'text' && skeletonText};\n            ${$variant === 'circle' && skeletonCircle};\n        `}\n\n${({ $inlineBlock }) =>\n  $inlineBlock &&\n  css`\n            display: inline-block;\n            vertical-align: middle;\n        `}\n`;\n"],
  "mappings": "6DAIA,IAAMA,EAAeC;AAAA;AAAA,sBAECC,EAAK,EAAG,CAAC;AAAA;AAAA,EAIzBC,EAAiBF;AAAA;AAAA,EAYVG,EAAWC,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA,qBAGtDC,GAAUA,EAAM,MAAM,KAAK,YAAY;AAAA;AAAA,MAEvD,CAAC,CAAE,OAAAC,EAAQ,QAAAC,CAAQ,IACnBP;AAAA,sBACgBO,GAAW,OAAO;AAAA,qBACnBD,GAAU,MAAM;AAAA,SAC5B;AAAA;AAAA,MAEH,CAAC,CAAE,OAAAE,CAAO,IACVA,GACAR;AAAA;AAAA;AAAA,8BAGwBQ,EAAS,GAAG;AAAA,SACjC;AAAA;AAAA,IAEL,CAAC,CAAE,SAAAC,CAAS,IACZA,GACAT;AAAA,cACUS,IAAa,QAAUV,CAAY;AAAA,cACnCU,IAAa,UAAYP,CAAc;AAAA,SAC5C;AAAA;AAAA,EAEP,CAAC,CAAE,aAAAQ,CAAa,IAChBA,GACAV;AAAA;AAAA;AAAA,SAGO;",
  "names": ["skeletonText", "lt", "size", "skeletonCircle", "Skeleton", "dt", "props", "$width", "$height", "$ratio", "$variant", "$inlineBlock"]
}