{"version":3,"sources":["../../../src/utilities/SafeImageLoading/SafeImageLoading.tsx","../../../src/Skeleton/Skeleton.tsx","../../../src/utilities/Clay/Clay.tsx","../../../src/Skeleton/Skeleton.styles.ts","../../../src/hocs/SwitchCase.tsx"],"names":["useImageLoadingStatus","useTimeout","useState","vars","forwardRef","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","size","width","height","shape","sx","as","native","props","__objRest","__spreadProps","__spreadValues","ClayNameSpace","css","keyframes","horizontalSkeletonKeyframes","diagonalSkeletonKeyframes","horizontalCSS","duration","diagonalCSS","Skeleton","rounded","variation","SwitchCase","value","caseBy","defaultComponent","SafeImageLoading","src","fallback","loadingDelay","loadingStatus","isLocalLoading","setIsLocalLoading"],"mappings":"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","sourcesContent":["/* eslint-disable @next/next/no-img-element */\n\nimport { useImageLoadingStatus, useTimeout } from \"@imwebme/clay-hooks\";\nimport { useState } from \"react\";\nimport { Skeleton } from \"../../Skeleton\";\nimport { SwitchCase } from \"../../hocs\";\nimport type { SafeImageLoadingProps } from \"./SafeImageLoading.types\";\n\nexport const SafeImageLoading = ({\n  src,\n  fallback = null,\n  width = \"100%\",\n  height = \"100%\",\n  loadingDelay = 0,\n}: SafeImageLoadingProps) => {\n  const loadingStatus = useImageLoadingStatus(src);\n  const [isLocalLoading, setIsLocalLoading] = useState(true);\n\n  useTimeout({\n    effect: () => setIsLocalLoading(false),\n    ms: loadingDelay,\n    enabled: loadingStatus === \"loaded\",\n  });\n\n  return (\n    <SwitchCase\n      value={loadingStatus}\n      caseBy={{\n        loading: <Skeleton variation=\"diagonal\" width={width} height={height} rounded=\"none\" />,\n        loaded: isLocalLoading ? (\n          <Skeleton variation=\"diagonal\" width={width} height={height} rounded=\"none\" />\n        ) : (\n          <img\n            src={src}\n            alt=\"\"\n            style={{\n              width,\n              height,\n              objectFit: \"cover\",\n            }}\n          />\n        ),\n      }}\n      defaultComponent={fallback}\n    />\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType } from \"react\";\nimport { Clay } from \"../utilities\";\nimport { diagonalCSS, horizontalCSS } from \"./Skeleton.styles\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\nexport const Skeleton = <Element extends ElementType>({\n  sx,\n  duration = \"1300ms\",\n  height = \"200px\",\n  width = \"200px\",\n  rounded = \"base\",\n  variation = \"horizontal\",\n  ...props\n}: SkeletonProps<Element>) => {\n  return (\n    <Clay\n      css={[\n        variation === \"diagonal\"\n          ? diagonalCSS({ width, height, duration })\n          : horizontalCSS({ width, height, duration }),\n        {\n          borderRadius: vars.rounded[rounded],\n        },\n        sx,\n      ]}\n      {...props}\n    />\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"./Clay.types\";\n\nexport type ClayComponent = <C extends ElementType = \"div\">(\n  props: ClayProps<C> & {\n    ref?: ComponentPropsWithRef<C>[\"ref\"];\n  },\n) => ReactElement | null;\n\nconst Clay: ClayComponent = forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      className,\n      _hover,\n      _active,\n      _after,\n      _before,\n      _focus,\n      size,\n      width,\n      height,\n      shape,\n      sx,\n      as,\n      native,\n      ...props\n    }: ClayProps<E>,\n    ref: ComponentPropsWithRef<E>[\"ref\"],\n  ) => {\n    const Element = as || \"div\";\n\n    return (\n      <Element\n        ref={ref}\n        className={className}\n        css={{\n          width: size || width,\n          height: size || height,\n          ...(shape === \"circle\" && {\n            borderRadius: vars.rounded.full,\n          }),\n          \"&:hover\": _hover,\n          \"&:active\": _active,\n          \"&:after\": _after,\n          \"&:before\": _before,\n          \"&:focus\": _focus,\n          ...props,\n          ...sx,\n        }}\n        {...native}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst ClayNameSpace = Object.assign(Clay, { displayName: \"Clay\" });\n\nexport { ClayNameSpace as Clay };\n","import { css, keyframes } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\nimport type { SkeletonProps } from \".\";\n\nconst horizontalSkeletonKeyframes = (width: CSSProperties[\"width\"]) => keyframes`\n0% {\n  background-position: -${width} 0;\n}\n100% {\n  background-position: calc(${width} + 100%) 0;\n}\n`;\n\nconst diagonalSkeletonKeyframes = (width?: CSSProperties[\"width\"]) => keyframes`\n  0% {\n      left: -(calc(${width}/2) + calc(${width} * 2));\n    }\n    100% {\n      left: calc(3/2 * ${width});\n    }\n  `;\n\nexport const horizontalCSS = ({\n  width,\n  height,\n  duration,\n}: Pick<SkeletonProps<\"div\">, \"width\" | \"height\" | \"duration\">) =>\n  css({\n    width,\n    height,\n    backgroundColor: vars.semantic.color.surfaceSub,\n    backgroundImage: `${`linear-gradient(90deg, ${vars.semantic.color.surfaceSub}, ${vars.semantic.color.surface}, ${vars.semantic.color.surfaceSub})`}`,\n    backgroundRepeat: \"no-repeat\",\n\n    animation: `${horizontalSkeletonKeyframes(width)} ${duration} ease-in-out infinite;`,\n  });\n\nexport const diagonalCSS = ({\n  width,\n  height,\n  duration,\n}: Pick<SkeletonProps<\"div\">, \"width\" | \"height\" | \"duration\">) =>\n  css({\n    width,\n    height,\n    background: vars.semantic.color.surfaceSub,\n    position: \"relative\",\n    overflow: \"hidden\",\n\n    \"&:before\": {\n      content: '\"\"',\n      transform: \"skewX(-45deg)\",\n      backgroundImage: `linear-gradient(90deg, ${vars.semantic.color.surfaceSub} 0px, ${vars.semantic.color.surface} calc(${width}/2), ${vars.semantic.color.surfaceSub} ${width})`,\n      position: \"absolute\",\n      backgroundRepeat: \"repeat-x\",\n      left: `calc(((${width} / 2) + (${width} * 2)) * -1)`,\n      width: `calc(${width} * 2)`,\n      height: \"100%\",\n      animation: `${diagonalSkeletonKeyframes(width)} ${duration} ease-in-out infinite`,\n    },\n  });\n","import type { JSX } from \"react\";\n\ninterface Props<Case extends string> {\n  caseBy: Partial<Record<Case, JSX.Element | null>>;\n  value: Case;\n  defaultComponent?: JSX.Element | null;\n}\n\n/**\n * @name SwitchCase\n * @description switch-case 구문을 선언적으로 사용할 수 있는 컴포넌트입니다\n * @example\n *  <SwitchCase\n *    value={status}\n *    // status 값이 `'a'`, `'b'`, `'c'` 인지에 따라서 아래 컴포넌트가 render 됩니다.\n *    caseBy={{\n *      a: <TypeA />,\n *      b: <TypeB />,\n *      c: <TypeC />\n *    }}\n *    // status 값이 아무것도 해당되지 않는 경우, 이 컴포넌트가 render 됩니다.\n *    defaultComponent={<Default />}\n * />\n */\nexport const SwitchCase = <Case extends string>({\n  value,\n  caseBy,\n  defaultComponent = null,\n}: Props<Case>) => {\n  if (value === null) {\n    return defaultComponent;\n  }\n\n  return caseBy[value] ?? defaultComponent;\n};\n"]}