{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Form/index.tsx"],
  "sourcesContent": ["import styled, { css } from 'styled-components';\n\nimport { size } from '../../layout/helpers';\n\ninterface FormProps {\n  $width?: 'narrow';\n}\n\nexport const Form = styled.div.withConfig({ componentId: 'sc-2y6ki7-0' })<FormProps>`\n    --gap: ${size(1.5)};\n    --column-count: 2;\n    --min-width: 250px;\n\n    // Calculcated values\n    --gap-count: calc(var(--column-count) - 1);\n    --total-gap-width: calc(var(--gap-count) * var(--gap));\n    --max-width: calc((100% - var(--total-gap-width)) / var(--column-count));\n\n    ${({ $width }) =>\n      $width === 'narrow' &&\n      css`\n            --min-width: 165px;\n        `}\n\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(max(min(var(--min-width), 100%), var(--max-width)), 1fr));\n    gap: var(--gap);\n`;\n\ninterface FormGroupProps {\n  $width?: 'half';\n}\n\nexport const FormGroup = styled.div.withConfig({ componentId: 'sc-2y6ki7-1' })<FormGroupProps>`\n    ${({ $width }) =>\n      $width === 'half'\n        ? css`\n                  grid-column: span 1;\n              `\n        : css`\n                  grid-column: 1 / -1;\n              `}\n`;\n"],
  "mappings": "6DAQO,IAAMA,EAAOC,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA,aAC3DC,EAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAShB,CAAC,CAAE,OAAAC,CAAO,IACVA,IAAW,UACXC;AAAA;AAAA,SAEG;AAAA;AAAA;AAAA;AAAA;AAAA,EAWIC,EAAYJ,EAAO,IAAI,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA,MACvE,CAAC,CAAE,OAAAE,CAAO,IACVA,IAAW,OACPC;AAAA;AAAA,gBAGAA;AAAA;AAAA,eAEK;",
  "names": ["Form", "dt", "size", "$width", "lt", "FormGroup"]
}