{"version":3,"sources":["../../../src/Button/SocialLoginButton/SocialLoginButton.css.ts","../../../src/Button/SocialLoginButton/SocialLoginButton.icons.tsx","../../../src/Button/SocialLoginButton/SocialLoginButton.tsx"],"names":["css","vars","baseCss","fullWidthCss","withTextCss","sizeStyles","socialVariants","SocialLoginButton_icons_exports","__export","apple","facebook","google","kakao","line","naver","jsx","jsxs","SocialLoginButton","props","_a","Element","native","variant","size","sx","restProps","__objRest","icon","commonStyles","text","fullWidth","__spreadProps","__spreadValues"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const baseCss = css({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n\n  cursor: \"pointer\",\n  \"&:focus\": {\n    outline: \"none\",\n  },\n});\n\nexport const fullWidthCss = css({\n  width: \"100%\",\n});\n\nexport const withTextCss = css({\n  gap: vars.spacing[2],\n});\n\nexport const sizeStyles = {\n  medium: css`\n    padding: ${vars.spacing[2]} ${vars.spacing[3]};\n    border-radius: ${vars.rounded.medium};\n    ${vars.semantic.typography[\"label-medium-bold\"]}\n    svg {\n      font-size: 20px;\n    }\n  `,\n  large: css`\n    padding: ${vars.spacing[3]};\n    border-radius: ${vars.rounded.medium};\n    ${vars.semantic.typography[\"label-large-bold\"]}\n    svg {\n      font-size: 24px;\n    }\n  `,\n  \"medium-icon\": css`\n    padding: ${vars.spacing[25]};\n    border-radius: ${vars.rounded.full};\n\n    svg {\n      font-size: 20px;\n    }\n  `,\n  \"large-icon\": css`\n    padding: ${vars.spacing[3]};\n    border-radius: ${vars.rounded.full};\n\n    svg {\n      font-size: 24px;\n    }\n  `,\n};\n\nexport const socialVariants = {\n  naver: css({\n    color: \"#FFF\",\n    background: \"#03C75A\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #03C75A\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #03C75A\",\n    },\n  }),\n  kakao: css({\n    color: \"rgba(0, 0, 0, 0.85)\",\n    background: \"#FEE500\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), #FEE500\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), #FEE500\",\n    },\n  }),\n  google: css({\n    color: vars.semantic.color.textSecondary,\n    background: vars.semantic.color.actionSecondary,\n    boxShadow: `inset 0 0 0 1px ${vars.semantic.color.border}`,\n    \"&:hover\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderHover}`,\n    },\n    \"&:active\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderSub}`,\n    },\n  }),\n  apple: css({\n    color: vars.semantic.color.textSecondary,\n    background: vars.semantic.color.actionSecondary,\n    svg: {\n      color: \"#000\",\n    },\n    // 애플 로고 다크모드 대응\n    '*[data-clay-theme=\"dark-only\"] &': {\n      svg: {\n        color: \"#FFF\",\n      },\n    },\n    boxShadow: `inset 0 0 0 1px ${vars.semantic.color.border}`,\n    \"&:hover\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderHover}`,\n    },\n    \"&:active\": {\n      boxShadow: `inset 0 0 0 1px ${vars.semantic.color.borderSub}`,\n    },\n  }),\n  line: css({\n    color: \"#FFF\",\n    background: \"#06C755\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #06C755\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #06C755\",\n    },\n  }),\n  facebook: css({\n    color: \"#FFF\",\n    background: \"#1877F2\",\n    \"&:hover\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #1877F2\",\n    },\n    \"&:active\": {\n      background:\n        \"linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), #1877F2\",\n    },\n  }),\n};\n","export const kakao = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M10 3C5.58133 3 2 5.7791 2 9.20745C2 11.3382 3.38489 13.2184 5.49511 14.3367L4.60711 17.5927C4.52889 17.8814 4.856 18.1105 5.10756 17.9435L8.99822 15.3643C9.32711 15.3963 9.66044 15.414 10 15.414C14.4178 15.414 18 12.6349 18 9.20745C18 5.7791 14.4178 3 10 3Z\"\n      fill=\"black\"\n    />\n  </svg>\n);\n\nexport const naver = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M12.3988 10.45L7.3781 3.25H3.25V16.75H7.60124V9.55L12.6219 16.75H16.75V3.25H12.3988V10.45Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nexport const google = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M17.75 10.178C17.75 9.6512 17.7064 9.12154 17.6135 8.60326H10.1561V11.5876H14.4266C14.2494 12.5501 13.68 13.4016 12.8462 13.9426V15.879H15.394C16.8901 14.5292 17.75 12.5359 17.75 10.178Z\"\n      fill=\"#4285F4\"\n    />\n    <path\n      d=\"M10.1562 17.75C12.2886 17.75 14.0868 17.0637 15.397 15.8791L12.8492 13.9427C12.1404 14.4154 11.2253 14.6831 10.1591 14.6831C8.09651 14.6831 6.34764 13.319 5.72014 11.4851H3.09103V13.4814C4.43318 16.0984 7.16688 17.75 10.1562 17.75Z\"\n      fill=\"#34A853\"\n    />\n    <path\n      d=\"M5.71723 11.4854C5.38605 10.5229 5.38605 9.48067 5.71723 8.51816V6.52195H3.09102C1.96965 8.7118 1.96966 11.2915 3.09103 13.4814L5.71723 11.4854Z\"\n      fill=\"#FBBC05\"\n    />\n    <path\n      d=\"M10.1562 5.31745C11.2834 5.30037 12.3728 5.71612 13.1891 6.4793L15.4464 4.26667C14.0171 2.95105 12.1201 2.22774 10.1562 2.25052C7.16688 2.25052 4.43318 3.9021 3.09102 6.52195L5.71723 8.51816C6.34183 6.68142 8.09361 5.31745 10.1562 5.31745Z\"\n      fill=\"#EA4335\"\n    />\n  </svg>\n);\n\nexport const apple = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M12.1817 2.74683C11.5733 3.46648 10.5999 4.03409 9.62653 3.953C9.50485 2.97995 9.98141 1.94609 10.5391 1.30753C11.1475 0.56761 12.2121 0.0405436 13.074 0C13.1754 1.01359 12.7799 2.00691 12.1817 2.74683ZM13.0638 4.14558C11.6544 4.0645 10.4478 4.94632 9.77862 4.94632C9.09927 4.94632 8.07518 4.18613 6.95984 4.2064C5.50989 4.22667 4.16133 5.04768 3.42115 6.35521C1.90022 8.97027 3.02571 12.8422 4.49594 14.9707C5.21584 16.0249 6.0777 17.1803 7.21333 17.1398C8.28811 17.0993 8.71397 16.4404 10.0118 16.4404C11.3198 16.4404 11.695 17.1398 12.8306 17.1195C14.0068 17.0993 14.747 16.0654 15.4669 15.0113C16.2882 13.8152 16.6228 12.6496 16.6431 12.5888C16.6228 12.5685 14.3718 11.707 14.3515 9.11217C14.3313 6.94309 16.126 5.90923 16.2071 5.84841C15.1931 4.3483 13.6114 4.18613 13.0638 4.14558Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const line = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M15.3918 8.59343C15.6461 8.59343 15.8525 8.79816 15.8525 9.05004C15.8525 9.30164 15.6461 9.50637 15.3918 9.50637H14.1077V10.3231H15.3918C15.6457 10.3231 15.8525 10.5279 15.8525 10.7797C15.8525 11.0316 15.6457 11.2363 15.3918 11.2363H13.6467C13.3932 11.2363 13.1862 11.0316 13.1862 10.7797V7.32027C13.1862 7.06853 13.3927 6.86366 13.6467 6.86366H15.3918C15.6461 6.86366 15.8525 7.06853 15.8525 7.32027C15.8525 7.57201 15.6461 7.77674 15.3918 7.77674H14.1077V8.59343H15.3918ZM12.5677 10.7797C12.5677 10.9767 12.4415 11.1507 12.2529 11.2127C12.2055 11.2284 12.1561 11.2363 12.1067 11.2363C11.963 11.2363 11.8255 11.1681 11.7386 11.0536L9.95014 8.63959V10.7797C9.95014 11.0316 9.74373 11.2363 9.48975 11.2363C9.23578 11.2363 9.02909 11.0316 9.02909 10.7797V7.32027C9.02909 7.12353 9.15565 6.94953 9.34379 6.88723C9.39122 6.87137 9.44063 6.86366 9.49004 6.86366C9.63373 6.86366 9.77162 6.93171 9.85783 7.04622L11.6468 9.46049V7.32027C11.6468 7.06853 11.8537 6.86366 12.1074 6.86366C12.3615 6.86366 12.5677 7.06853 12.5677 7.32027V10.7797ZM8.36735 10.7797C8.36735 11.0316 8.1608 11.2363 7.90711 11.2363C7.65327 11.2363 7.44672 11.0316 7.44672 10.7797V7.32027C7.44672 7.06853 7.65327 6.86366 7.90711 6.86366C8.1608 6.86366 8.36735 7.06853 8.36735 7.32027V10.7797ZM6.56182 11.2363H4.81684C4.56301 11.2363 4.35632 11.0316 4.35632 10.7797V7.32027C4.35632 7.06853 4.56301 6.86366 4.81684 6.86366C5.07082 6.86366 5.27723 7.06853 5.27723 7.32027V10.3231H6.56182C6.81608 10.3231 7.02235 10.5279 7.02235 10.7797C7.02235 11.0316 6.81608 11.2363 6.56182 11.2363ZM18.783 8.91836C18.783 5.02297 14.8428 1.85376 10 1.85376C5.15739 1.85376 1.2171 5.02297 1.2171 8.91836C1.2171 12.4106 4.34167 15.3355 8.56255 15.8888C8.84824 15.9498 9.23755 16.076 9.33623 16.3182C9.42485 16.5381 9.39427 16.8827 9.36454 17.1051C9.36454 17.1051 9.2619 17.7195 9.23925 17.8505C9.20103 18.0706 9.06272 18.7111 10 18.3198C10.9375 17.9284 15.0579 15.3675 16.9004 13.265H16.9C18.173 11.8819 18.783 10.4775 18.783 8.91836Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nexport const facebook = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M18.8998 10.0536C18.8998 5.13824 14.9151 1.15358 9.99976 1.15358C5.08442 1.15358 1.09976 5.13824 1.09976 10.0536C1.09976 14.4958 4.35436 18.1778 8.60914 18.8455V12.6262H6.34937V10.0536H8.60914V8.0928C8.60914 5.86223 9.93784 4.63014 11.9708 4.63014C12.9445 4.63014 13.963 4.80397 13.963 4.80397V6.9942H12.8408C11.7352 6.9942 11.3904 7.68025 11.3904 8.38408V10.0536H13.8587L13.4642 12.6262H11.3904V18.8455C15.6452 18.1778 18.8998 14.4958 18.8998 10.0536Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n","/** @jsxImportSource @emotion/react */\n\nimport type { ElementType } from \"react\";\nimport {\n  baseCss,\n  fullWidthCss,\n  sizeStyles,\n  socialVariants,\n  withTextCss,\n} from \"./SocialLoginButton.css\";\nimport * as icons from \"./SocialLoginButton.icons\";\nimport type { SocialLoginButtonProps } from \"./SocialLoginButton.types\";\n\nexport function SocialLoginButton<Element extends ElementType>(\n  props: SocialLoginButtonProps<Element>,\n) {\n  const { as: Element = \"button\", native, variant, size = \"medium\", sx, ...restProps } = props;\n  const icon = icons[props.variant];\n  const commonStyles = [baseCss, socialVariants[variant]];\n\n  // with text\n  if (\"text\" in props && props.text) {\n    const { text, fullWidth } = props;\n    return (\n      <Element\n        css={[...commonStyles, withTextCss, sizeStyles[size], fullWidth && fullWidthCss, sx]}\n        {...restProps}\n        {...native}\n      >\n        {icon}\n        {text}\n      </Element>\n    );\n  }\n\n  // icon only\n  return (\n    <Element css={[...commonStyles, sizeStyles[`${size}-icon`], sx]} {...restProps} {...native}>\n      {icon}\n    </Element>\n  );\n}\n"]}