{"version":3,"sources":["../../src/Textarea/Textarea.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Label/Label.tsx","../../src/Typography/Typography.tsx","../../src/Textarea/Textarea.core.tsx","../../src/Textarea/Textarea.css.ts","../../src/Textarea/components/CharacterCount.tsx"],"names":["vars","forwardRef","useMemo","useState","jsx","Clay","_a","ref","_b","children","className","_hover","_active","_after","_before","_focus","size","width","height","shape","sx","as","native","props","__objRest","__spreadProps","__spreadValues","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","jsxs","_Label","type","text","bold","Typography","Label","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","css","textareaWrapperCSS","isError","isFocus","minHeight","characterCount","textareaCSS","maxLengthCSS","TextareaCore","onChange","nativeOnBlur","nativeOnChange","nativeOnFocus","maxLength","placeholder","setIsFocus","restProps","event","newValue","CharacterCount","value","clayProps","Textarea","label","labelProps","helperText","errorText","restCoreProps","_isFocus","computedHelperText"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { Ref } from \"react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport { Flex, Label, Typography } from \"..\";\nimport { TextareaCore } from \"./Textarea.core\";\nimport { maxLengthCSS, textareaWrapperCSS } from \"./Textarea.css\";\nimport type { TextareaProps } from \"./Textarea.types\";\nimport { CharacterCount } from \"./components\";\n\nexport const Textarea = forwardRef(\n  (\n    {\n      label,\n      labelProps,\n      helperText,\n      errorText,\n      className,\n      maxLength,\n      isError,\n      sx,\n      height,\n      value,\n      isFocus,\n      characterCount,\n      ...restCoreProps\n    }: TextareaProps,\n    ref: Ref<HTMLTextAreaElement>,\n  ) => {\n    const [_isFocus, setIsFocus] = useState(isFocus);\n\n    const computedHelperText = useMemo(() => {\n      if (errorText || helperText) {\n        if (isError) return errorText;\n\n        return helperText;\n      }\n\n      return null;\n    }, [errorText, helperText, isError]);\n\n    const minHeight = useMemo(() => {\n      switch (height) {\n        case \"min\":\n          return \"100px\";\n\n        case \"max\":\n          return \"184px\";\n\n        default:\n          return \"140px\";\n      }\n    }, [height]);\n\n    return (\n      <Flex.Column gap={vars.spacing[15]} className={className} sx={sx}>\n        {label && <Label text={label} {...labelProps} />}\n        <div css={textareaWrapperCSS({ isError, isFocus: _isFocus, minHeight, characterCount })}>\n          <TextareaCore\n            ref={ref}\n            setIsFocus={setIsFocus}\n            value={value}\n            maxLength={maxLength}\n            {...restCoreProps}\n          />\n\n          {characterCount && (\n            <CharacterCount sx={{ ...maxLengthCSS }} value={value} maxLength={maxLength} />\n          )}\n        </div>\n\n        {computedHelperText && (\n          <Typography variant=\"body-small\" colorToken={isError ? \"textCritical\" : \"textSub\"}>\n            {computedHelperText}\n          </Typography>\n        )}\n      </Flex.Column>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\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 { vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"..\";\nimport type { LabelProps } from \"./Label.types\";\n\nconst _Label = <Element extends ElementType>(\n  { type = \"primary\", className, text, bold = true, sx, as, children }: LabelProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"label\";\n\n  return (\n    <Element\n      ref={ref as any}\n      className={className}\n      css={{\n        display: \"flex\",\n        gap: vars.spacing[1],\n        alignItems: \"center\",\n        sx,\n      }}\n    >\n      <Typography\n        variant={bold ? \"label-medium-bold\" : \"label-medium\"}\n        colorToken={type === \"primary\" ? \"text\" : \"textSub\"}\n      >\n        {text}\n      </Typography>\n\n      {children}\n    </Element>\n  );\n};\n\nexport const Label = forwardRef(_Label);\n\nLabel.displayName = \"Label\";\n","/** @jsxImportSource @emotion/react */\n\nimport { classNames, vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { TypographyProps } from \"./Typography.types\";\n\n/**\n * token은 두 가지 방법으로 넣어줄 수 있습니다. semanticToken, variant\n * 값은 body-medium이 default 입니다.\n */\nconst _Typography = <Element extends ElementType>(\n  {\n    as,\n    semanticToken,\n    variant = \"body-medium\",\n    className = \"\",\n    colorToken = \"text\",\n    children,\n    whiteSpace,\n    numOfLine,\n    sx,\n    textAlign,\n    native,\n  }: TypographyProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"p\";\n\n  return (\n    <Element\n      className={`${classNames.typography[semanticToken || variant]} ${className}`}\n      ref={ref as any}\n      css={{\n        color: vars.semantic.color[colorToken],\n        ...(numOfLine && {\n          display: \"-webkit-box\",\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          WebkitBoxOrient: \"vertical\",\n          WebkitLineClamp: numOfLine,\n        }),\n        whiteSpace,\n        textAlign,\n        ...sx,\n      }}\n      {...native}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport const Typography = forwardRef(_Typography);\n\nTypography.displayName = \"Typography\";\n","/** @jsxImportSource @emotion/react */\n\nimport type { ChangeEventHandler, FocusEventHandler, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport { textareaCSS } from \"./Textarea.css\";\nimport type { TextareaCoreProps } from \"./Textarea.types\";\n\nexport const TextareaCore = forwardRef(\n  (\n    {\n      onChange,\n      nativeOnBlur,\n      nativeOnChange,\n      nativeOnFocus,\n      maxLength,\n      placeholder,\n      setIsFocus,\n      native,\n      ...restProps\n    }: TextareaCoreProps,\n    ref: Ref<HTMLTextAreaElement>,\n  ) => {\n    const _onChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n      const newValue = event.target.value;\n\n      if (maxLength && newValue.length > maxLength) return;\n\n      nativeOnChange?.(event);\n      onChange?.(newValue);\n    };\n\n    const _onFocus: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n      nativeOnFocus?.(event);\n      setIsFocus?.(true);\n    };\n\n    const _onBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n      nativeOnBlur?.(event);\n      setIsFocus?.(false);\n    };\n\n    return (\n      <textarea\n        ref={ref}\n        onChange={_onChange}\n        css={[textareaCSS]}\n        onFocus={_onFocus}\n        onBlur={_onBlur}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        {...restProps}\n        {...native}\n      />\n    );\n  },\n);\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { TextareaProps } from \".\";\n\nexport const textareaWrapperCSS = ({\n  isError,\n  isFocus,\n  minHeight,\n  characterCount,\n}: Pick<TextareaProps, \"isError\" | \"characterCount\"> & { isFocus?: boolean; minHeight?: string }) =>\n  css({\n    position: \"relative\",\n\n    display: \"flex\",\n    flexDirection: \"column\",\n\n    width: \"100%\",\n    padding: vars.spacing[3],\n    paddingBottom: vars.spacing[characterCount ? 2 : 3],\n    backgroundColor: vars.semantic.color[isError ? \"surfaceCritical\" : \"surface\"],\n    borderRadius: vars.rounded.medium,\n    outlineColor: vars.semantic.color[isFocus ? \"focus\" : \"border\"],\n    outlineWidth: \"1px\",\n\n    \"&:has(textarea:disabled)\": {\n      backgroundColor: vars.semantic.color.fieldDisabled,\n      outline: \"none\",\n    },\n\n    \"&:not(:hover)\": {\n      outlineWidth: isError ? \"0\" : \"1px\",\n    },\n\n    outlineStyle: \"solid\",\n    minHeight,\n\n    \"&:has(textarea:focus)\": {\n      outlineWidth: \"2px\",\n      backgroundColor: vars.semantic.color.surface,\n    },\n\n    \"&:not(:has(textarea:focus, textarea:disabled)):hover\": {\n      outlineColor: vars.semantic.color[isError ? \"borderCriticalHover\" : \"borderHover\"],\n    },\n  });\n\nexport const textareaCSS = css({\n  width: \"100%\",\n  flex: 1,\n\n  padding: 0,\n\n  border: \"none\",\n\n  resize: \"none\",\n  outline: \"none\",\n  backgroundColor: \"transparent\",\n\n  \"&:disabled\": {\n    cursor: \"not-allowed\",\n    backgroundColor: \"unset\",\n  },\n\n  ...vars.semantic.typography[\"body-medium\"],\n\n  \"&:placeholder\": {\n    color: vars.semantic.color.textSub,\n  },\n\n  \"::-webkit-scrollbar\": {\n    display: \"none\",\n  },\n});\n\nexport const maxLengthCSS = css({\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n  background: \"transparent\",\n});\n","/** @jsxImportSource @emotion/react */\n\nimport { Typography } from \"../../Typography\";\nimport { Clay } from \"../../utilities\";\nimport type { ClayProps } from \"../../utilities/Clay/Clay.types\";\nimport type { TextareaCoreProps } from \"../Textarea.types\";\n\nexport type CharacterCountProps = Pick<TextareaCoreProps, \"maxLength\" | \"value\"> & ClayProps<\"div\">;\n\nexport const CharacterCount = ({ value, maxLength, ...clayProps }: CharacterCountProps) => {\n  return (\n    <Clay as=\"div\" {...clayProps}>\n      <Typography colorToken=\"textSub\">\n        {`${value ? value.length : 0}${maxLength ? `/${maxLength}` : \"\"}`}\n      </Typography>\n    </Clay>\n  );\n};\n"]}