export declare const fieldTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledSmall } from \"cherry-styled-components\";\nimport { Theme } from \"@/app/theme\";\n\nconst StyledField = styled.div<{ theme: Theme; $columns?: number }>`\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 0 0 20px 0;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledFieldFlex = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  ${({ theme }) => styledSmall(theme)};\n  padding: 0 0 15px 0;\n`;\n\nconst StyledFieldValue = styled.span<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.mono};\n  font-weight: 600;\n`;\n\nconst StyledFieldType = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.dark};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\nconst StyledFieldRequired = styled.span<{ theme: Theme }>`\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.error} 20%, transparent)`};\n  color: ${({ theme }) => theme.colors.error};\n  padding: 0 4px;\n  font-family: ${({ theme }) => theme.fonts.mono};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n`;\n\ninterface FieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  value: string;\n  type: string;\n  required?: boolean;\n}\n\nfunction Field({ children, value, type, required }: FieldProps) {\n  return (\n    <StyledField>\n      <StyledFieldFlex>\n        <StyledFieldValue>{value}</StyledFieldValue>\n        <StyledFieldType>{type}</StyledFieldType>\n        {required && <StyledFieldRequired>required</StyledFieldRequired>}\n      </StyledFieldFlex>\n      {children}\n    </StyledField>\n  );\n}\n\nexport { Field };\n";