export declare const colorSwatchTemplate = "\"use client\";\nimport styled from \"styled-components\";\nimport { styledText } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\n\nconst StyledSwatchGroup = styled.div<{ theme: Theme }>`\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: ${({ theme }) => theme.spacing.gridGap.xs};\n\n  ${mq(\"md\")} {\n    grid-template-columns: repeat(3, 1fr);\n  }\n`;\n\nconst StyledSwatch = styled.div<{ theme: Theme }>`\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  overflow: hidden;\n`;\n\nconst StyledColor = styled.div<{\n  theme: Theme;\n  $color: string;\n  $lightText: boolean;\n}>`\n  background: ${({ $color }) => $color};\n  height: 80px;\n  display: flex;\n  align-items: flex-end;\n  padding: 8px 12px;\n  color: ${({ $lightText }) => ($lightText ? \"#FFFFFF\" : \"#000000\")};\n  font-size: 12px;\n  font-family: monospace;\n  opacity: 0.8;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n`;\n\nconst StyledLabel = styled.div<{ theme: Theme }>`\n  padding: 10px 12px;\n  background: ${({ theme }) => theme.colors.light};\n  ${({ theme }) => styledText(theme)};\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  code {\n    color: ${({ theme }) => theme.colors.dark};\n    font-weight: 600;\n    font-size: 13px;\n  }\n`;\n\nfunction luminance(hex: string): number {\n  const rgb = hex\n    .replace(\"#\", \"\")\n    .match(/.{2}/g)!\n    .map((c) => parseInt(c, 16) / 255);\n\n  const [r, g, b] = rgb.map((c) =>\n    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),\n  );\n\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\ninterface ColorSwatchProps {\n  token: string;\n  value: string;\n}\n\nfunction ColorSwatch({ token, value }: ColorSwatchProps) {\n  const useLightText = luminance(value) < 0.4;\n\n  return (\n    <StyledSwatch>\n      <StyledColor $color={value} $lightText={useLightText}>\n        {value}\n      </StyledColor>\n      <StyledLabel>\n        <code className=\"token\">{token}</code>\n      </StyledLabel>\n    </StyledSwatch>\n  );\n}\n\ninterface ColorSwatchGroupProps {\n  children: React.ReactNode;\n}\n\nfunction ColorSwatchGroup({ children }: ColorSwatchGroupProps) {\n  return <StyledSwatchGroup>{children}</StyledSwatchGroup>;\n}\n\nexport { ColorSwatch, ColorSwatchGroup };\n";