{"version":3,"sources":["../../src/Textfield/Textfield.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Label/Label.tsx","../../src/Typography/Typography.tsx","../../src/Textfield/Textfield.addon.tsx","../../src/Textfield/Textfield.box.tsx","../../src/Textfield/Textfield.css.ts","../../src/Textfield/Textfield.input.tsx","../../src/Textfield/Textfield.helperText.tsx"],"names":["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","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","jsxs","_Label","type","text","bold","Typography","Label","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","TextfieldPasswordIcon","setPasswordShow","disabled","show","TextfieldAddon","css","cssVariableMap","inputContainerCSS","inputCSS","AlertTriangleFilled","CheckCircleFilled","useMemo","useState","Fragment","TextfieldInput","value","onChange","onClick","onChangeText","align","maxLength","isValid","restProps","passwordShow","event","newValue","TextfieldNumericInput","numberFormatOption","locales","formatWithLocalString","e","onlyNumber","deletedNotNumber","TextfieldBox","TextfieldNoAddon","TextfieldHelperText","TextfieldSet","TextfieldNamespace"],"mappings":"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","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { PropsWithChildren, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"..\";\nimport { Flex, Label } from \"..\";\nimport { TextfieldAddon } from \"./Textfield.addon\";\nimport { TextfieldBox, TextfieldNoAddon } from \"./Textfield.box\";\nimport { TextfieldHelperText } from \"./Textfield.helperText\";\nimport { TextfieldInput, TextfieldNumericInput } from \"./Textfield.input\";\n\nconst TextfieldSet = forwardRef(\n  (\n    { children, ...restProps }: PropsWithChildren<ClayProps<\"fieldset\">>,\n    ref: Ref<HTMLFieldSetElement>,\n  ) => {\n    return (\n      <Flex.Column as=\"fieldset\" ref={ref} gap={vars.spacing[15]} {...restProps}>\n        {children}\n      </Flex.Column>\n    );\n  },\n);\n\nTextfieldSet.displayName = \"Textfield.Set\";\n\nconst TextfieldNamespace = Object.assign(TextfieldNoAddon, {\n  Set: TextfieldSet,\n  Input: TextfieldInput,\n  NumericInput: TextfieldNumericInput,\n  Legend: Label,\n  Box: TextfieldBox,\n  Addon: TextfieldAddon,\n  HelperText: TextfieldHelperText,\n});\n\nexport { TextfieldNamespace as Textfield };\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 { vars } from \"@imwebme/clay-token\";\nimport type { Dispatch, ElementType, SetStateAction } from \"react\";\nimport { Flex } from \"../utilities\";\nimport type { TextfieldAddonProps } from \"./Textfield.types\";\n\nexport const TextfieldPasswordIcon = ({\n  setPasswordShow,\n  disabled,\n}: {\n  setPasswordShow: Dispatch<SetStateAction<boolean>>;\n  disabled?: boolean;\n}) => {\n  return (\n    <Flex\n      as=\"button\"\n      className=\"clay-textfield-addon-password-button\"\n      native={{\n        onClick: () => setPasswordShow((show) => !show),\n        type: \"button\",\n        disabled,\n      }}\n      backgroundColor=\"transparent\"\n    >\n      <svg\n        className=\"clay-textfield-addon-password-show\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        color={vars.semantic.color.iconSecondary}\n      >\n        <path\n          d=\"M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n\n      <svg\n        className=\"clay-textfield-addon-password-hidden\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        color={vars.semantic.color.iconSecondary}\n      >\n        <path\n          d=\"M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </Flex>\n  );\n};\n\nexport const TextfieldAddon = <Element extends ElementType>({\n  children,\n  ...props\n}: TextfieldAddonProps<Element>) => {\n  return (\n    <Flex\n      minWidth=\"24px\"\n      {...props}\n      sx={{\n        \"input ~ &\": {\n          justifyContent: \"flex-end\",\n        },\n      }}\n    >\n      {children}\n    </Flex>\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Flex } from \"../utilities\";\nimport { cssVariableMap, inputContainerCSS } from \"./Textfield.css\";\nimport { TextfieldInput } from \"./Textfield.input\";\nimport type { TextfieldBoxProps, TextfieldInputProps } from \"./Textfield.types\";\n\ntype TextfieldBoxComponents = <E extends ElementType>(\n  props: TextfieldBoxProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nexport const TextfieldBox: TextfieldBoxComponents = forwardRef(function TextfieldBox<\n  E extends ElementType,\n>(\n  {\n    variant = \"outlined\",\n    children,\n    width = \"full\",\n    size = \"medium\",\n    className,\n    sx,\n    as,\n    native,\n  }: TextfieldBoxProps<E>,\n  ref: ComponentPropsWithRef<ElementType>[\"ref\"],\n) {\n  return (\n    <Flex\n      as={as || \"div\"}\n      ref={ref}\n      display={width === \"full\" ? \"flex\" : \"inline-flex\"}\n      width={width === \"full\" ? \"100%\" : width}\n      className={className}\n      alignItems=\"center\"\n      minWidth=\"80px\"\n      native={{\n        \"data-clay-textfield-container-size\": size,\n        ...native,\n        style: {\n          ...cssVariableMap.variant[variant],\n          ...cssVariableMap.size[size],\n          ...native?.style,\n        },\n      }}\n      css={[\n        inputContainerCSS,\n        sx,\n        {\n          \"&:has(input:disabled)\": {\n            \"& :has(svg) svg\": {\n              color: vars.semantic.color.iconDisabled,\n            },\n          },\n        },\n      ]}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport const TextfieldNoAddon = ({\n  variant,\n  size,\n  width,\n  ...restProps\n}: TextfieldBoxProps<\"div\"> & Omit<TextfieldInputProps, \"size\">) => (\n  <TextfieldBox variant={variant} size={size} width={width}>\n    <TextfieldInput {...restProps} />\n  </TextfieldBox>\n);\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { CSSProperties } from \"react\";\n\nexport const cssVariableMap = {\n  variant: {\n    outlined: {\n      \"--background-color\": vars.semantic.color.field,\n      \"--outline-color\": vars.semantic.color.border,\n    } as CSSProperties,\n    filled: {\n      \"--background-color\": vars.semantic.color.fieldSub,\n      \"--outline-color\": \"transparent\",\n    } as CSSProperties,\n    secondary: {\n      \"--background-color\": vars.semantic.color.fieldSub,\n      \"--outline-color\": \"transparent\",\n    } as CSSProperties,\n  },\n  size: {\n    medium: {\n      \"--padding-x\": vars.spacing[3],\n    } as CSSProperties,\n    large: {\n      \"--padding-x\": vars.spacing[4],\n    } as CSSProperties,\n  },\n};\n\nexport const inputContainerCSS = css({\n  padding: \"0 var(--padding-x)\",\n\n  backgroundColor: \"var(--background-color)\",\n\n  border: \"none\",\n  borderRadius: vars.rounded.medium,\n\n  outlineWidth: \"1px\",\n  outlineStyle: \"solid\",\n  outlineOffset: \"-1px\",\n  outlineColor: \"var(--outline-color)\",\n\n  \"&:not(:where(:has([readonly]), [aria-invalid='true'], :has(input:focus))):hover\": {\n    outlineColor: vars.semantic.color.borderHover,\n  },\n\n  // disabled\n  \"&:where(:has(input:disabled))\": {\n    backgroundColor: vars.semantic.color.fieldDisabled,\n    outline: \"none\",\n    color: vars.semantic.color.textDisabled,\n    cursor: \"not-allowed\",\n  },\n\n  // focus\n  \"&:where(:has(input:focus:not(:read-only)))\": {\n    outlineColor: vars.semantic.color.focus,\n    backgroundColor: vars.semantic.color.surface,\n    outlineWidth: \"2px\",\n    outlineOffset: \"-2px\",\n  },\n\n  // invalid\n  \"&:where(:has([aria-invalid='true']:not(input:focus)))\": {\n    backgroundColor: vars.semantic.color.surfaceCriticalSecondary,\n    outlineColor: \"transparent\",\n\n    \"&:hover\": {\n      outlineColor: vars.semantic.color.borderCriticalHover,\n    },\n  },\n\n  // readonly\n  \"&:has([readonly])\": {\n    backgroundColor: vars.semantic.color.fieldSub,\n\n    outline: \"none\",\n    cursor: \"default\",\n  },\n});\n\nexport const inputCSS = css({\n  flex: 1,\n  width: \"100%\",\n\n  padding: `${vars.spacing[\"25\"]} 0`,\n\n  '[data-clay-textfield-container-size=\"large\"] &': {\n    padding: `${vars.spacing[\"3\"]} 0`,\n    ...vars.semantic.typography[\"body-large\"],\n\n    \"&::placeholder\": {\n      fontSize: vars.fontSize.small,\n    },\n  },\n\n  margin: 0,\n  outline: \"none\",\n  border: \"none\",\n  caretColor: vars.semantic.color.focus,\n\n  textAlign: \"var(--text-align)\" as CSSProperties[\"textAlign\"],\n  ...vars.semantic.typography[\"body-medium\"],\n  color: vars.semantic.color.text,\n  backgroundColor: \"transparent\",\n  cursor: \"inherit\",\n\n  \"&::placeholder\": {\n    color: vars.semantic.color.textSub,\n    lineHeight: 1,\n  },\n\n  \"&:disabled\": {\n    color: vars.semantic.color.textDisabled,\n\n    \"&::placeholder\": {\n      color: \"inherit\",\n    },\n  },\n\n  \"&:not(:disabled):read-only\": {\n    color: vars.semantic.color.textSub,\n  },\n\n  \"&[type='password']\": {\n    fontSize: \"19.4px\",\n    letterSpacing: \"2px\",\n    fontWeight: 900,\n\n    \"&::placeholder\": {\n      ...vars.semantic.typography[\"body-medium\"],\n      letterSpacing: \"0\",\n    },\n  },\n\n  \"&[type='password']:not(:placeholder-shown)\": {\n    fontSize: \"19.4px\",\n    letterSpacing: \"2px\",\n    fontWeight: 900,\n  },\n\n  \"&:not([type='password']) ~ .clay-textfield-addon-password-button svg.clay-textfield-addon-password-hidden\":\n    {\n      display: \"none\",\n    },\n\n  \"&[type='password'] ~ .clay-textfield-addon-password-button svg.clay-textfield-addon-password-show\":\n    {\n      display: \"none\",\n    },\n\n  \"&::-webkit-search-cancel-button\": {\n    WebkitAppearance: \"none\",\n    position: \"relative\",\n    right: \"-2px\",\n\n    width: \"24px\",\n    height: \"20px\",\n\n    background: `url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" color=\"var(--clay-color-semantic-icon-secondary)\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"currentColor\" strokeWidth=\"1.2\" vectorEffect=\"non-scaling-stroke\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>'); no-repeat 50% 50%`,\n    backgroundSize: \"contain\",\n    backgroundPosition: \"right\",\n  },\n\n  \"&::-webkit-inner-spin-button, &::-webkit-outer-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n});\n","/* eslint-disable jsx-a11y/control-has-associated-label */\n/** @jsxImportSource @emotion/react */\n\nimport { AlertTriangleFilled, CheckCircleFilled } from \"@imwebme/clay-icons\";\nimport type { CSSProperties, ChangeEvent, ChangeEventHandler, ComponentProps, Ref } from \"react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport { Typography } from \"../Typography\";\nimport { Flex } from \"../utilities\";\nimport { TextfieldPasswordIcon } from \"./Textfield.addon\";\nimport { inputCSS } from \"./Textfield.css\";\nimport type { TextfieldInputProps } from \"./Textfield.types\";\n\nexport const TextfieldInput = forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onClick,\n      onChangeText,\n      align,\n      maxLength,\n      isValid,\n      type,\n      ...restProps\n    }: TextfieldInputProps,\n    ref: Ref<HTMLInputElement>,\n  ) => {\n    const [passwordShow, setPasswordShow] = useState(false);\n\n    const _onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      const newValue = event.target.value;\n\n      if (maxLength && newValue.length > maxLength) {\n        return;\n      }\n\n      onChange?.(event);\n      onChangeText?.(newValue);\n    };\n\n    const cssVariables = {\n      \"--text-align\": align,\n    } as CSSProperties;\n\n    return (\n      <>\n        <input\n          ref={ref}\n          type={type === \"password\" && passwordShow ? \"text\" : type}\n          value={value}\n          aria-invalid={typeof isValid === \"boolean\" ? !isValid : undefined}\n          onClick={onClick}\n          onChange={_onChange}\n          maxLength={maxLength}\n          style={cssVariables}\n          css={inputCSS}\n          {...restProps}\n        />\n\n        {isValid === undefined && maxLength && (\n          <Typography colorToken=\"textSub\">\n            {value?.toString().length}/{maxLength}\n          </Typography>\n        )}\n\n        {type === \"password\" && (\n          <TextfieldPasswordIcon setPasswordShow={setPasswordShow} disabled={restProps.disabled} />\n        )}\n\n        {typeof isValid === \"boolean\" && (\n          <Flex\n            className=\"clay-textfield-valid-icon-container\"\n            width=\"24px\"\n            justifyContent=\"flex-end\"\n            sx={{\n              \"input[aria-invalid]:focus ~ &\": {\n                display: \"none\",\n              },\n            }}\n          >\n            {isValid ? (\n              <CheckCircleFilled colorToken=\"icon-success\" />\n            ) : (\n              <AlertTriangleFilled colorToken=\"icon-critical\" />\n            )}\n          </Flex>\n        )}\n      </>\n    );\n  },\n);\n\nexport const TextfieldNumericInput = ({\n  onChange,\n  value,\n  numberFormatOption,\n  onChangeText,\n  locales = \"ko-KR\",\n  ...props\n}: ComponentProps<typeof TextfieldInput> & {\n  locales?: Intl.LocalesArgument;\n  numberFormatOption?: Intl.NumberFormatOptions;\n}) => {\n  const formatWithLocalString = useMemo(\n    () => (value ? Number(value).toLocaleString(locales, numberFormatOption) : undefined),\n    [locales, numberFormatOption, value],\n  );\n\n  return (\n    <TextfieldInput\n      onInput={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n      value={formatWithLocalString}\n      onChange={(e) => {\n        const onlyNumber = e.target.value.replace(/\\D/g, \"\");\n\n        onChange?.({\n          target: {\n            value: onlyNumber,\n          } as Pick<HTMLInputElement, \"value\">,\n        } as ChangeEvent<HTMLInputElement>);\n\n        onChangeText?.(onlyNumber);\n      }}\n      onKeyDownCapture={(e) => {\n        if (e.key === \"e\") {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n      onPaste={(e) => {\n        e.preventDefault();\n        const paste = e.clipboardData.getData(\"text\");\n        const deletedNotNumber = paste.replace(/\\D/g, \"\");\n\n        onChange?.({\n          target: {\n            value: deletedNotNumber,\n          } as Pick<HTMLInputElement, \"value\">,\n        } as ChangeEvent<HTMLInputElement>);\n\n        onChangeText?.(deletedNotNumber);\n      }}\n      align=\"right\"\n      {...props}\n    />\n  );\n};\n","import { vars } from \"@imwebme/clay-token\";\nimport type { ElementType } from \"react\";\nimport { Typography } from \"../Typography\";\nimport type { TextfieldHelperTextProps } from \"./Textfield.types\";\n\nexport const TextfieldHelperText = <Element extends ElementType>({\n  children,\n  ...restProps\n}: TextfieldHelperTextProps<Element>) => {\n  return (\n    <Typography\n      variant=\"body-small\"\n      sx={{\n        \"[data-clay-textfield-container-size]:has(input[aria-invalid='true']) ~ &\": {\n          color: vars.semantic.color.textCritical,\n        },\n\n        \"[data-clay-textfield-container-size]:has(input[aria-invalid='false']) ~ &\": {\n          color: vars.semantic.color.textSuccess,\n        },\n      }}\n      {...restProps}\n    >\n      {children}\n    </Typography>\n  );\n};\n"]}