{"version":3,"sources":["../../src/utilities/Absolute/Absolute.tsx","../../src/utilities/Absolute/Absolute.hooks.ts","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/utilities/LocalColorSchemeArea/LocalColorSchemeArea.tsx","../../src/utilities/Portal/Portal.tsx","../../src/utilities/SafeImageLoading/SafeImageLoading.tsx","../../src/Skeleton/Skeleton.tsx","../../src/Skeleton/Skeleton.styles.ts","../../src/hocs/SwitchCase.tsx"],"names":["cloneElement","isValidElement","useEffect","useState","useAbsolute","to","position","align","setDomRect","callback","x","height","y","width","style","fixedProperty","unFixedProperty","fixedAxisValue","fixedRelativeValue","alignAxisValue","alignRelativeValue","Absolute","children","offsetX","offsetY","autoMinWidth","floatStyle","__spreadProps","__spreadValues","vars","forwardRef","jsx","Clay","_a","ref","_b","className","_hover","_active","_after","_before","_focus","size","shape","sx","as","native","props","__objRest","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","Stack","FlexNameSpace","themeToString","theme","LocalColorSchemeArea","createPortal","Portal","container","absoluteProps","useImageLoadingStatus","useTimeout","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":["import { cloneElement, isValidElement } from \"react\";\nimport { useAbsolute } from \"./Absolute.hooks\";\nimport type { AbsoluteProps } from \"./Absolute.types\";\n\n/**\n * children 요소를 `to` props로 전달받은 요소를 기준으로 띄우는 역할입니다.\n *\n * 기본 position 이 `absolute` 로 설정되어 있어, 부모 요소에 영향을 받습니다.\n *\n * 만약 부모 요소와 관계 없이 화면에서 자유롭게 위치를 설정하고 싶다면, `Portal.Absolute` 또는 `Portal`과 함께 사용해주세요\n *\n * > Docs의 예시는 ref가 깨져서 `show code` 용으로만 확인해주시면 됩니다.\n */\nexport const Absolute = ({\n  to,\n  children,\n  position = \"bottom\",\n  align = \"start\",\n  offsetX = \"0px\",\n  offsetY = \"0px\",\n  autoMinWidth = false,\n}: AbsoluteProps) => {\n  const floatStyle = useAbsolute({ to, position, align });\n\n  if (!floatStyle || !isValidElement<HTMLElement>(children)) return null;\n\n  const floated = cloneElement(children, {\n    style: {\n      ...children.props.style,\n      position: \"fixed\",\n      minWidth: autoMinWidth ? \"auto\" : \"max-content\",\n      top: \"0\",\n      left: \"0\",\n      zIndex: \"var(--clay-zIndex-modal)\",\n      transform: `translate(calc(${floatStyle.computedX} + ${offsetX}), calc(${floatStyle.computedY} + ${offsetY}))`,\n    },\n  });\n\n  return floated;\n};\n","import { useEffect, useState } from \"react\";\nimport type { AbsoluteProps } from \"./Absolute.types\";\n\nexport const useAbsolute = ({\n  to,\n  position,\n  align,\n}: Pick<AbsoluteProps, \"align\" | \"position\" | \"to\">): {\n  computedX: string;\n  computedY: string;\n} | null => {\n  const [, setDomRect] = useState<undefined | DOMRect>();\n\n  useEffect(() => {\n    const callback = () => {\n      if (to) setDomRect(to.getBoundingClientRect());\n    };\n\n    window.addEventListener(\"scroll\", callback, { passive: true, capture: false });\n\n    return () => {\n      window.removeEventListener(\"scroll\", callback);\n    };\n  }, [to]);\n\n  if (!to) return null;\n\n  const { x, height, y, width } = to.getBoundingClientRect();\n\n  const style = {\n    computedY: \"\",\n    computedX: \"\",\n  };\n\n  let fixedProperty: \"computedY\" | \"computedX\" = \"computedY\";\n  let unFixedProperty: \"computedY\" | \"computedX\" = \"computedX\";\n  let fixedAxisValue = y;\n  let fixedRelativeValue = height;\n  let alignAxisValue = x;\n  let alignRelativeValue = width;\n\n  if (position === \"left\" || position === \"right\") {\n    fixedProperty = \"computedX\";\n    unFixedProperty = \"computedY\";\n    fixedAxisValue = x;\n    fixedRelativeValue = width;\n    alignAxisValue = y;\n    alignRelativeValue = height;\n  }\n\n  if (position === \"left\" || position === \"top\")\n    style[fixedProperty] = `calc(-100% + ${fixedAxisValue}px)`;\n  else style[fixedProperty] = `${fixedAxisValue + fixedRelativeValue}px`;\n\n  if (align === \"start\") {\n    style[unFixedProperty] = `${alignAxisValue}px`;\n  }\n\n  if (align === \"center\") {\n    style[unFixedProperty] = `calc(${alignAxisValue + alignRelativeValue / 2}px - 50%)`;\n  }\n\n  if (align === \"end\") {\n    style[unFixedProperty] = `calc(${alignAxisValue + alignRelativeValue}px - 100%)`;\n  }\n\n  return style;\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 type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Clay } from \"../Clay\";\nimport type { ClayComponent, ClayProps } from \"../Clay/Clay.types\";\n\nconst _Flex: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Clay ref={ref} display=\"flex\" {...props} />,\n);\n\nconst Flex = Object.assign(_Flex, { displayName: \"Flex\" });\n\nconst _FlexCenter: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} alignItems=\"center\" justifyContent=\"center\" {...props} />,\n);\n\nconst FlexCenter = Object.assign(_FlexCenter, { displayName: \"Flex.Center\" });\n\nconst _FlexColumn: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    { as = \"div\" as any, ...props }: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} as={as} flexDirection=\"column\" {...props} />,\n);\n\nconst FlexColumn = Object.assign(_FlexColumn, { displayName: \"Flex.Column\" });\n\n/**\n * @deprecated Use `Flex.Column` instead\n */\nexport const Stack = FlexColumn;\n\nconst FlexNameSpace = Object.assign(Flex, { Center: FlexCenter, Column: FlexColumn });\n\nexport { FlexNameSpace as Flex };\n","/** @jsxImportSource @emotion/react */\n\nimport type { CSSProperties, PropsWithChildren } from \"react\";\n\ntype LocalColorSchemeAreaProps = PropsWithChildren & {\n  sx?: CSSProperties;\n  theme: \"light\" | \"dark\" | \"🌝\" | \"🌚\";\n};\n\nconst themeToString = (theme: LocalColorSchemeAreaProps[\"theme\"]) =>\n  theme === \"🌝\" || theme === \"light\" ? \"light\" : \"dark\";\n\n/**\n * html의 theme을 무시하고, 해당 컴포넌트를 기준으로 theme을 설정할 수 있습니다.\n *\n * children 요소는 section tag 로 감싸지며 sx를 통해 section tag의 style을 직접 조정할 수 있습니다.\n */\nexport const LocalColorSchemeArea = (props: LocalColorSchemeAreaProps) => {\n  return (\n    <section className={`clay-${themeToString(props.theme)}-theme-area`} css={{ ...props.sx }}>\n      {props.children}\n    </section>\n  );\n};\n","import { isValidElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { AbsoluteProps } from \"../Absolute\";\nimport { Absolute } from \"../Absolute\";\nimport type { PortalProps } from \"./Portal.types\";\n\nexport const Portal = ({ children, container = globalThis?.document?.body }: PortalProps) => {\n  if (!container || !isValidElement(children)) return null;\n\n  return createPortal(children, container);\n};\n\nPortal.Absolute = ({ children, ...absoluteProps }: AbsoluteProps) => (\n  <Portal>\n    <Absolute {...absoluteProps}>{children}</Absolute>\n  </Portal>\n);\n","/* 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","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"]}