@channel.io/bezier-react 2.6.2 → 3.0.0

package/dist/esm/components/FormControl/FormControl.mjs

@@ -1,11 +1,12 @@
-import React__default, { forwardRef, useState, useMemo, useCallback } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { forwardRef, useState, useMemo, useCallback } from 'react';
+import classNames from '../../_virtual/index.mjs';
 import useId from '../../hooks/useId.mjs';
 import { getFormFieldSizeClassName } from '../../types/props-helpers.mjs';
 import { ariaAttr } from '../../utils/aria.mjs';
 import { createContext } from '../../utils/react.mjs';
 import { isNil } from '../../utils/type.mjs';
 import styles from './FormControl.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 import { Stack } from '../Stack/Stack.mjs';
 
 const [FormControlContextProvider, useFormControlContext] = createContext(undefined);
@@ -18,17 +19,21 @@ const Container = /*#__PURE__*/forwardRef(function Container({
 }, forwardedRef) {
   switch (labelPosition) {
     case 'top':
-      return /*#__PURE__*/React__default.createElement(Stack, Object.assign({
+      return /*#__PURE__*/jsx(Stack, {
         className: className,
         ref: forwardedRef,
-        direction: "vertical"
-      }, rest), children);
+        direction: "vertical",
+        ...rest,
+        children: children
+      });
     case 'left':
     default:
-      return /*#__PURE__*/React__default.createElement("div", Object.assign({
+      return /*#__PURE__*/jsx("div", {
         ref: forwardedRef,
-        className: classNames(styles.Grid, className)
-      }, rest), children);
+        className: classNames(styles.Grid, className),
+        ...rest,
+        children: children
+      });
   }
 });
 const FormControl = /*#__PURE__*/forwardRef(function FormControl({
@@ -116,13 +121,16 @@ const FormControl = /*#__PURE__*/forwardRef(function FormControl({
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(FormControlContextProvider, {
-    value: contextValue
-  }, /*#__PURE__*/React__default.createElement(Container, Object.assign({}, rest, {
-    ref: forwardedRef,
-    labelPosition: labelPosition,
-    "data-testid": FORM_CONTROL_TEST_ID
-  }), children));
+  return /*#__PURE__*/jsx(FormControlContextProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsx(Container, {
+      ...rest,
+      ref: forwardedRef,
+      labelPosition: labelPosition,
+      "data-testid": FORM_CONTROL_TEST_ID,
+      children: children
+    })
+  });
 });
 function useFormFieldProps(props) {
   const contextValue = useFormControlContext();

package/dist/esm/components/FormControl/FormControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.mjs","sources":["../../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport {\n  type FormFieldProps,\n  type FormFieldSize,\n  type SizeProps,\n} from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlContextValue,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\n\nimport styles from './FormControl.module.scss'\n\nconst [FormControlContextProvider, useFormControlContext] = createContext<\n  FormControlContextValue | undefined\n>(undefined)\n\nexport { useFormControlContext }\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container(\n  { labelPosition, children, className, ...rest },\n  forwardedRef\n) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          className={className}\n          ref={forwardedRef}\n          direction=\"vertical\"\n          {...rest}\n        >\n          {children}\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <div\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          className={classNames(styles.Grid, className)}\n          {...rest}\n        >\n          {children}\n        </div>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(\n  function FormControl(\n    {\n      children,\n      id: idProp,\n      labelPosition = 'top',\n      size = 'm',\n      hasError,\n      required,\n      readOnly,\n      disabled,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n    const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(\n      null\n    )\n    const [errorMessageNode, setErrorMessageNode] =\n      useState<HTMLElement | null>(null)\n\n    const id = useId(idProp, 'field')\n    const groupId = `${id}-group`\n    const labelId = `${id}-label`\n    const helperTextId = `${id}-help-text`\n    const errorMessageId = `${id}-error-message`\n\n    const fieldId = groupNode ? undefined : id\n\n    const describerId = useMemo(() => {\n      if (errorMessageNode) {\n        return errorMessageId\n      }\n      if (helperTextNode) {\n        return helperTextId\n      }\n      return undefined\n    }, [errorMessageNode, helperTextNode, errorMessageId, helperTextId])\n\n    const getGroupProps = useCallback<GroupPropsGetter>(\n      (ownProps) => ({\n        id: groupId,\n        'aria-labelledby': labelId,\n        'aria-describedby': describerId,\n        ref: setGroupNode,\n        ...ownProps,\n      }),\n      [groupId, labelId, describerId]\n    )\n\n    const getLabelProps = useCallback<LabelPropsGetter>(\n      (ownProps) => ({\n        id: labelId,\n        htmlFor: fieldId,\n        className: classNames(\n          styles.FormLabelWrapper,\n          styles[`position-${labelPosition}`],\n          getFormFieldSizeClassName(size)\n        ),\n        typo: labelPosition === 'top' ? '13' : '14',\n        ...ownProps,\n      }),\n      [fieldId, labelId, labelPosition, size]\n    )\n\n    const getFieldProps = useCallback<FieldPropsGetter>(\n      (ownProps) => ({\n        id: fieldId,\n        size,\n        'aria-describedby': groupNode ? undefined : describerId,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n        ...ownProps,\n      }),\n      [\n        fieldId,\n        describerId,\n        size,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n        groupNode,\n      ]\n    )\n\n    const getHelperTextProps = useCallback<HelperTextPropsGetter>(\n      (ownProps) => ({\n        id: helperTextId,\n        visible: isNil(hasError) || !hasError,\n        ref: setHelperTextNode,\n        className: classNames(\n          styles.FormHelperTextWrapper,\n          labelPosition === 'left' && styles['position-left']\n        ),\n        ...ownProps,\n      }),\n      [helperTextId, labelPosition, hasError]\n    )\n\n    const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(\n      (ownProps) => ({\n        id: errorMessageId,\n        visible: isNil(hasError) || hasError,\n        ref: setErrorMessageNode,\n        className: classNames(\n          styles.FormHelperTextWrapper,\n          labelPosition === 'left' && styles['position-left']\n        ),\n        ...ownProps,\n      }),\n      [errorMessageId, labelPosition, hasError]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        id,\n        labelId,\n        helperTextId,\n        errorMessageId,\n        getGroupProps,\n        getLabelProps,\n        getFieldProps,\n        getHelperTextProps,\n        getErrorMessageProps,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n      }),\n      [\n        id,\n        labelId,\n        helperTextId,\n        errorMessageId,\n        getGroupProps,\n        getLabelProps,\n        getFieldProps,\n        getHelperTextProps,\n        getErrorMessageProps,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n      ]\n    )\n\n    if (!children) {\n      return null\n    }\n\n    return (\n      <FormControlContextProvider value={contextValue}>\n        <Container\n          {...rest}\n          ref={forwardedRef}\n          labelPosition={labelPosition}\n          data-testid={FORM_CONTROL_TEST_ID}\n        >\n          {children}\n        </Container>\n      </FormControlContextProvider>\n    )\n  }\n)\n\nexport function useFormFieldProps<\n  Props extends FormFieldProps & SizeProps<FormFieldSize>,\n>(props?: Props) {\n  const contextValue = useFormControlContext()\n\n  const formFieldProps = useMemo(() => {\n    const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n    const {\n      disabled = false,\n      readOnly = false,\n      required = false,\n      hasError = false,\n      size = undefined,\n      ...rest\n    } = mergedProps\n\n    return {\n      ...rest,\n      'aria-disabled': ariaAttr(disabled),\n      'aria-invalid': ariaAttr(hasError),\n      'aria-required': ariaAttr(required),\n      'aria-readonly': ariaAttr(readOnly),\n      size,\n      disabled,\n      hasError,\n      required,\n      readOnly,\n    }\n  }, [props, contextValue])\n\n  return formFieldProps as typeof formFieldProps & Props\n}\n"],"names":["FormControlContextProvider","useFormControlContext","createContext","undefined","FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","className","rest","forwardedRef","React","createElement","Stack","Object","assign","ref","direction","classNames","styles","Grid","FormControl","id","idProp","size","hasError","required","readOnly","disabled","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","describerId","useMemo","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","getFormFieldSizeClassName","typo","getFieldProps","getHelperTextProps","visible","isNil","FormHelperTextWrapper","getErrorMessageProps","contextValue","value","useFormFieldProps","props","formFieldProps","_contextValue$getFiel","mergedProps","ariaAttr"],"mappings":"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"}
+{"version":3,"file":"FormControl.mjs","sources":["../../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport {\n  type FormFieldProps,\n  type FormFieldSize,\n  type SizeProps,\n} from '~/src/types/props'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { ariaAttr } from '~/src/utils/aria'\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlContextValue,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\n\nimport styles from './FormControl.module.scss'\n\nconst [FormControlContextProvider, useFormControlContext] = createContext<\n  FormControlContextValue | undefined\n>(undefined)\n\nexport { useFormControlContext }\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container(\n  { labelPosition, children, className, ...rest },\n  forwardedRef\n) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          className={className}\n          ref={forwardedRef}\n          direction=\"vertical\"\n          {...rest}\n        >\n          {children}\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <div\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          className={classNames(styles.Grid, className)}\n          {...rest}\n        >\n          {children}\n        </div>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(\n  function FormControl(\n    {\n      children,\n      id: idProp,\n      labelPosition = 'top',\n      size = 'm',\n      hasError,\n      required,\n      readOnly,\n      disabled,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n    const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(\n      null\n    )\n    const [errorMessageNode, setErrorMessageNode] =\n      useState<HTMLElement | null>(null)\n\n    const id = useId(idProp, 'field')\n    const groupId = `${id}-group`\n    const labelId = `${id}-label`\n    const helperTextId = `${id}-help-text`\n    const errorMessageId = `${id}-error-message`\n\n    const fieldId = groupNode ? undefined : id\n\n    const describerId = useMemo(() => {\n      if (errorMessageNode) {\n        return errorMessageId\n      }\n      if (helperTextNode) {\n        return helperTextId\n      }\n      return undefined\n    }, [errorMessageNode, helperTextNode, errorMessageId, helperTextId])\n\n    const getGroupProps = useCallback<GroupPropsGetter>(\n      (ownProps) => ({\n        id: groupId,\n        'aria-labelledby': labelId,\n        'aria-describedby': describerId,\n        ref: setGroupNode,\n        ...ownProps,\n      }),\n      [groupId, labelId, describerId]\n    )\n\n    const getLabelProps = useCallback<LabelPropsGetter>(\n      (ownProps) => ({\n        id: labelId,\n        htmlFor: fieldId,\n        className: classNames(\n          styles.FormLabelWrapper,\n          styles[`position-${labelPosition}`],\n          getFormFieldSizeClassName(size)\n        ),\n        typo: labelPosition === 'top' ? '13' : '14',\n        ...ownProps,\n      }),\n      [fieldId, labelId, labelPosition, size]\n    )\n\n    const getFieldProps = useCallback<FieldPropsGetter>(\n      (ownProps) => ({\n        id: fieldId,\n        size,\n        'aria-describedby': groupNode ? undefined : describerId,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n        ...ownProps,\n      }),\n      [\n        fieldId,\n        describerId,\n        size,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n        groupNode,\n      ]\n    )\n\n    const getHelperTextProps = useCallback<HelperTextPropsGetter>(\n      (ownProps) => ({\n        id: helperTextId,\n        visible: isNil(hasError) || !hasError,\n        ref: setHelperTextNode,\n        className: classNames(\n          styles.FormHelperTextWrapper,\n          labelPosition === 'left' && styles['position-left']\n        ),\n        ...ownProps,\n      }),\n      [helperTextId, labelPosition, hasError]\n    )\n\n    const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(\n      (ownProps) => ({\n        id: errorMessageId,\n        visible: isNil(hasError) || hasError,\n        ref: setErrorMessageNode,\n        className: classNames(\n          styles.FormHelperTextWrapper,\n          labelPosition === 'left' && styles['position-left']\n        ),\n        ...ownProps,\n      }),\n      [errorMessageId, labelPosition, hasError]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        id,\n        labelId,\n        helperTextId,\n        errorMessageId,\n        getGroupProps,\n        getLabelProps,\n        getFieldProps,\n        getHelperTextProps,\n        getErrorMessageProps,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n      }),\n      [\n        id,\n        labelId,\n        helperTextId,\n        errorMessageId,\n        getGroupProps,\n        getLabelProps,\n        getFieldProps,\n        getHelperTextProps,\n        getErrorMessageProps,\n        hasError,\n        required,\n        readOnly,\n        disabled,\n      ]\n    )\n\n    if (!children) {\n      return null\n    }\n\n    return (\n      <FormControlContextProvider value={contextValue}>\n        <Container\n          {...rest}\n          ref={forwardedRef}\n          labelPosition={labelPosition}\n          data-testid={FORM_CONTROL_TEST_ID}\n        >\n          {children}\n        </Container>\n      </FormControlContextProvider>\n    )\n  }\n)\n\nexport function useFormFieldProps<\n  Props extends FormFieldProps & SizeProps<FormFieldSize>,\n>(props?: Props) {\n  const contextValue = useFormControlContext()\n\n  const formFieldProps = useMemo(() => {\n    const mergedProps = contextValue?.getFieldProps(props) ?? { ...props }\n\n    const {\n      disabled = false,\n      readOnly = false,\n      required = false,\n      hasError = false,\n      size = undefined,\n      ...rest\n    } = mergedProps\n\n    return {\n      ...rest,\n      'aria-disabled': ariaAttr(disabled),\n      'aria-invalid': ariaAttr(hasError),\n      'aria-required': ariaAttr(required),\n      'aria-readonly': ariaAttr(readOnly),\n      size,\n      disabled,\n      hasError,\n      required,\n      readOnly,\n    }\n  }, [props, contextValue])\n\n  return formFieldProps as typeof formFieldProps & Props\n}\n"],"names":["FormControlContextProvider","useFormControlContext","createContext","undefined","FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","className","rest","forwardedRef","_jsx","Stack","ref","direction","classNames","styles","Grid","FormControl","id","idProp","size","hasError","required","readOnly","disabled","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","describerId","useMemo","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","FormLabelWrapper","getFormFieldSizeClassName","typo","getFieldProps","getHelperTextProps","visible","isNil","FormHelperTextWrapper","getErrorMessageProps","contextValue","value","useFormFieldProps","props","formFieldProps","_contextValue$getFiel","mergedProps","ariaAttr"],"mappings":";;;;;;;;;;;AAgCM,MAAA,CAACA,0BAA0B,EAAEC,qBAAqB,CAAC,GAAGC,aAAa,CAEvEC,SAAS;AAIJ,MAAMC,oBAAoB,GAAG;AAEpC,MAAMC,SAAS,gBAAGC,UAAU,CAA8B,SAASD,SAASA,CAC1E;EAAEE,aAAa;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAC,EAC/CC,YAAY,EACZ;AACA,EAAA,QAAQJ,aAAa;AACnB,IAAA,KAAK,KAAK;MACR,oBACEK,GAAA,CAACC,KAAK,EAAA;AACJJ,QAAAA,SAAS,EAAEA,SAAU;AACrBK,QAAAA,GAAG,EAAEH,YAAa;AAClBI,QAAAA,SAAS,EAAC,UAAU;AAAA,QAAA,GAChBL,IAAI;AAAAF,QAAAA,QAAA,EAEPA;AAAQ,OACJ,CAAC;AAGZ,IAAA,KAAK,MAAM;AACX,IAAA;AACE,MAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEE,QAAAA,GAAG,EAAEH,YAAmD;QACxDF,SAAS,EAAEO,UAAU,CAACC,MAAM,CAACC,IAAI,EAAET,SAAS,CAAE;AAAA,QAAA,GAC1CC,IAAI;AAAAF,QAAAA,QAAA,EAEPA;AAAQ,OACN,CAAC;AAEZ;AACF,CAAC,CAAC;MAEWW,WAAW,gBAAGb,UAAU,CACnC,SAASa,WAAWA,CAClB;EACEX,QAAQ;AACRY,EAAAA,EAAE,EAAEC,MAAM;AACVd,EAAAA,aAAa,GAAG,KAAK;AACrBe,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR,GAAGhB;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACgB,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAqB,IAAI,CAAC;EACpE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,QAAQ,CAClD,IACF,CAAC;EACD,MAAM,CAACG,gBAAgB,EAAEC,mBAAmB,CAAC,GAC3CJ,QAAQ,CAAqB,IAAI,CAAC;AAEpC,EAAA,MAAMT,EAAE,GAAGc,KAAK,CAACb,MAAM,EAAE,OAAO,CAAC;AACjC,EAAA,MAAMc,OAAO,GAAG,CAAGf,EAAAA,EAAE,CAAQ,MAAA,CAAA;AAC7B,EAAA,MAAMgB,OAAO,GAAG,CAAGhB,EAAAA,EAAE,CAAQ,MAAA,CAAA;AAC7B,EAAA,MAAMiB,YAAY,GAAG,CAAGjB,EAAAA,EAAE,CAAY,UAAA,CAAA;AACtC,EAAA,MAAMkB,cAAc,GAAG,CAAGlB,EAAAA,EAAE,CAAgB,cAAA,CAAA;AAE5C,EAAA,MAAMmB,OAAO,GAAGZ,SAAS,GAAGxB,SAAS,GAAGiB,EAAE;AAE1C,EAAA,MAAMoB,WAAW,GAAGC,OAAO,CAAC,MAAM;AAChC,IAAA,IAAIT,gBAAgB,EAAE;AACpB,MAAA,OAAOM,cAAc;AACvB;AACA,IAAA,IAAIR,cAAc,EAAE;AAClB,MAAA,OAAOO,YAAY;AACrB;AACA,IAAA,OAAOlC,SAAS;GACjB,EAAE,CAAC6B,gBAAgB,EAAEF,cAAc,EAAEQ,cAAc,EAAED,YAAY,CAAC,CAAC;AAEpE,EAAA,MAAMK,aAAa,GAAGC,WAAW,CAC9BC,QAAQ,KAAM;AACbxB,IAAAA,EAAE,EAAEe,OAAO;AACX,IAAA,iBAAiB,EAAEC,OAAO;AAC1B,IAAA,kBAAkB,EAAEI,WAAW;AAC/B1B,IAAAA,GAAG,EAAEc,YAAY;IACjB,GAAGgB;GACJ,CAAC,EACF,CAACT,OAAO,EAAEC,OAAO,EAAEI,WAAW,CAChC,CAAC;AAED,EAAA,MAAMK,aAAa,GAAGF,WAAW,CAC9BC,QAAQ,KAAM;AACbxB,IAAAA,EAAE,EAAEgB,OAAO;AACXU,IAAAA,OAAO,EAAEP,OAAO;AAChB9B,IAAAA,SAAS,EAAEO,UAAU,CACnBC,MAAM,CAAC8B,gBAAgB,EACvB9B,MAAM,CAAC,CAAYV,SAAAA,EAAAA,aAAa,EAAE,CAAC,EACnCyC,yBAAyB,CAAC1B,IAAI,CAChC,CAAC;AACD2B,IAAAA,IAAI,EAAE1C,aAAa,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI;IAC3C,GAAGqC;GACJ,CAAC,EACF,CAACL,OAAO,EAAEH,OAAO,EAAE7B,aAAa,EAAEe,IAAI,CACxC,CAAC;AAED,EAAA,MAAM4B,aAAa,GAAGP,WAAW,CAC9BC,QAAQ,KAAM;AACbxB,IAAAA,EAAE,EAAEmB,OAAO;IACXjB,IAAI;AACJ,IAAA,kBAAkB,EAAEK,SAAS,GAAGxB,SAAS,GAAGqC,WAAW;IACvDjB,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACR,GAAGkB;AACL,GAAC,CAAC,EACF,CACEL,OAAO,EACPC,WAAW,EACXlB,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,CAEb,CAAC;AAED,EAAA,MAAMwB,kBAAkB,GAAGR,WAAW,CACnCC,QAAQ,KAAM;AACbxB,IAAAA,EAAE,EAAEiB,YAAY;AAChBe,IAAAA,OAAO,EAAEC,KAAK,CAAC9B,QAAQ,CAAC,IAAI,CAACA,QAAQ;AACrCT,IAAAA,GAAG,EAAEiB,iBAAiB;AACtBtB,IAAAA,SAAS,EAAEO,UAAU,CACnBC,MAAM,CAACqC,qBAAqB,EAC5B/C,aAAa,KAAK,MAAM,IAAIU,MAAM,CAAC,eAAe,CACpD,CAAC;IACD,GAAG2B;GACJ,CAAC,EACF,CAACP,YAAY,EAAE9B,aAAa,EAAEgB,QAAQ,CACxC,CAAC;AAED,EAAA,MAAMgC,oBAAoB,GAAGZ,WAAW,CACrCC,QAAQ,KAAM;AACbxB,IAAAA,EAAE,EAAEkB,cAAc;AAClBc,IAAAA,OAAO,EAAEC,KAAK,CAAC9B,QAAQ,CAAC,IAAIA,QAAQ;AACpCT,IAAAA,GAAG,EAAEmB,mBAAmB;AACxBxB,IAAAA,SAAS,EAAEO,UAAU,CACnBC,MAAM,CAACqC,qBAAqB,EAC5B/C,aAAa,KAAK,MAAM,IAAIU,MAAM,CAAC,eAAe,CACpD,CAAC;IACD,GAAG2B;GACJ,CAAC,EACF,CAACN,cAAc,EAAE/B,aAAa,EAAEgB,QAAQ,CAC1C,CAAC;AAED,EAAA,MAAMiC,YAAY,GAAGf,OAAO,CAC1B,OAAO;IACLrB,EAAE;IACFgB,OAAO;IACPC,YAAY;IACZC,cAAc;IACdI,aAAa;IACbG,aAAa;IACbK,aAAa;IACbC,kBAAkB;IAClBI,oBAAoB;IACpBhC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACRC,IAAAA;AACF,GAAC,CAAC,EACF,CACEN,EAAE,EACFgB,OAAO,EACPC,YAAY,EACZC,cAAc,EACdI,aAAa,EACbG,aAAa,EACbK,aAAa,EACbC,kBAAkB,EAClBI,oBAAoB,EACpBhC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,CAEZ,CAAC;EAED,IAAI,CAAClB,QAAQ,EAAE;AACb,IAAA,OAAO,IAAI;AACb;EAEA,oBACEI,GAAA,CAACZ,0BAA0B,EAAA;AAACyD,IAAAA,KAAK,EAAED,YAAa;IAAAhD,QAAA,eAC9CI,GAAA,CAACP,SAAS,EAAA;AAAA,MAAA,GACJK,IAAI;AACRI,MAAAA,GAAG,EAAEH,YAAa;AAClBJ,MAAAA,aAAa,EAAEA,aAAc;AAC7B,MAAA,aAAA,EAAaH,oBAAqB;AAAAI,MAAAA,QAAA,EAEjCA;KACQ;AAAC,GACc,CAAC;AAEjC,CACF;AAEO,SAASkD,iBAAiBA,CAE/BC,KAAa,EAAE;AACf,EAAA,MAAMH,YAAY,GAAGvD,qBAAqB,EAAE;AAE5C,EAAA,MAAM2D,cAAc,GAAGnB,OAAO,CAAC,MAAM;AAAA,IAAA,IAAAoB,qBAAA;AACnC,IAAA,MAAMC,WAAW,GAAAD,CAAAA,qBAAA,GAAGL,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,CAAEN,aAAa,CAACS,KAAK,CAAC,cAAAE,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI;MAAE,GAAGF;KAAO;IAEtE,MAAM;AACJjC,MAAAA,QAAQ,GAAG,KAAK;AAChBD,MAAAA,QAAQ,GAAG,KAAK;AAChBD,MAAAA,QAAQ,GAAG,KAAK;AAChBD,MAAAA,QAAQ,GAAG,KAAK;AAChBD,MAAAA,IAAI,GAAGnB,SAAS;MAChB,GAAGO;AACL,KAAC,GAAGoD,WAAW;IAEf,OAAO;AACL,MAAA,GAAGpD,IAAI;AACP,MAAA,eAAe,EAAEqD,QAAQ,CAACrC,QAAQ,CAAC;AACnC,MAAA,cAAc,EAAEqC,QAAQ,CAACxC,QAAQ,CAAC;AAClC,MAAA,eAAe,EAAEwC,QAAQ,CAACvC,QAAQ,CAAC;AACnC,MAAA,eAAe,EAAEuC,QAAQ,CAACtC,QAAQ,CAAC;MACnCH,IAAI;MACJI,QAAQ;MACRH,QAAQ;MACRC,QAAQ;AACRC,MAAAA;KACD;AACH,GAAC,EAAE,CAACkC,KAAK,EAAEH,YAAY,CAAC,CAAC;AAEzB,EAAA,OAAOI,cAAc;AACvB;;;;"}

package/dist/esm/components/FormGroup/FormGroup.mjs

@@ -1,6 +1,7 @@
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import useMergeRefs from '../../hooks/useMergeRefs.mjs';
 import { noop } from '../../utils/function.mjs';
+import { jsx } from 'react/jsx-runtime';
 import { useFormControlContext } from '../FormControl/FormControl.mjs';
 import { Stack } from '../Stack/Stack.mjs';
 
@@ -22,7 +23,7 @@ const FormGroup = /*#__PURE__*/forwardRef(function FormGroup({
     ...rest
   };
   const mergedRef = useMergeRefs(ref, forwardedRef);
-  return /*#__PURE__*/React__default.createElement(Stack, Object.assign({
+  return /*#__PURE__*/jsx(Stack, {
     "data-testid": FORM_GROUP_TEST_ID,
     ref: mergedRef,
     wrap: true,
@@ -30,8 +31,10 @@ const FormGroup = /*#__PURE__*/forwardRef(function FormGroup({
     align: "stretch",
     spacing: spacing,
     direction: direction,
-    role: role
-  }, ownProps), children);
+    role: role,
+    ...ownProps,
+    children: children
+  });
 });
 
 export { FormGroup };

package/dist/esm/components/FormGroup/FormGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.mjs","sources":["../../../../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Stack } from '~/src/components/Stack'\n\nimport { type FormGroupProps } from './FormGroup.types'\n\nconst FORM_GROUP_TEST_ID = 'bezier-form-group'\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup(\n    { spacing = 6, direction = 'vertical', role = 'group', children, ...rest },\n    forwardedRef\n  ) {\n    const contextValue = useFormControlContext()\n\n    const { ref, ...ownProps } = contextValue?.getGroupProps(rest) ?? {\n      ref: noop,\n      ...rest,\n    }\n\n    const mergedRef = useMergeRefs(ref, forwardedRef)\n\n    return (\n      <Stack\n        data-testid={FORM_GROUP_TEST_ID}\n        ref={mergedRef}\n        wrap\n        justify=\"start\"\n        align=\"stretch\"\n        spacing={spacing}\n        direction={direction}\n        role={role}\n        {...ownProps}\n      >\n        {children}\n      </Stack>\n    )\n  }\n)\n"],"names":["FORM_GROUP_TEST_ID","FormGroup","forwardRef","spacing","direction","role","children","rest","forwardedRef","_contextValue$getGrou","contextValue","useFormControlContext","ref","ownProps","getGroupProps","noop","mergedRef","useMergeRefs","React","createElement","Stack","Object","assign","wrap","justify","align"],"mappings":";;;;;;AAYA,MAAMA,kBAAkB,GAAG,mBAAmB;MAEjCC,SAAS,gBAAGC,UAAU,CACjC,SAASD,SAASA,CAChB;AAAEE,EAAAA,OAAO,GAAG,CAAC;AAAEC,EAAAA,SAAS,GAAG,UAAU;AAAEC,EAAAA,IAAI,GAAG,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC1EC,YAAY,EACZ;AAAA,EAAA,IAAAC,qBAAA;AACA,EAAA,MAAMC,YAAY,GAAGC,qBAAqB,EAAE;EAE5C,MAAM;IAAEC,GAAG;IAAE,GAAGC;AAAS,GAAC,IAAAJ,qBAAA,GAAGC,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,CAAEI,aAAa,CAACP,IAAI,CAAC,cAAAE,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI;AAChEG,IAAAA,GAAG,EAAEG,IAAI;IACT,GAAGR;GACJ;AAED,EAAA,MAAMS,SAAS,GAAGC,YAAY,CAACL,GAAG,EAAEJ,YAAY,CAAC;EAEjD,oBACEU,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACJ,IAAA,aAAA,EAAatB,kBAAmB;AAChCY,IAAAA,GAAG,EAAEI,SAAU;IACfO,IAAI,EAAA,IAAA;AACJC,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACftB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,IAAI,EAAEA;GACFQ,EAAAA,QAAQ,CAEXP,EAAAA,QACI,CAAC;AAEZ,CACF;;;;"}
+{"version":3,"file":"FormGroup.mjs","sources":["../../../../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Stack } from '~/src/components/Stack'\n\nimport { type FormGroupProps } from './FormGroup.types'\n\nconst FORM_GROUP_TEST_ID = 'bezier-form-group'\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup(\n    { spacing = 6, direction = 'vertical', role = 'group', children, ...rest },\n    forwardedRef\n  ) {\n    const contextValue = useFormControlContext()\n\n    const { ref, ...ownProps } = contextValue?.getGroupProps(rest) ?? {\n      ref: noop,\n      ...rest,\n    }\n\n    const mergedRef = useMergeRefs(ref, forwardedRef)\n\n    return (\n      <Stack\n        data-testid={FORM_GROUP_TEST_ID}\n        ref={mergedRef}\n        wrap\n        justify=\"start\"\n        align=\"stretch\"\n        spacing={spacing}\n        direction={direction}\n        role={role}\n        {...ownProps}\n      >\n        {children}\n      </Stack>\n    )\n  }\n)\n"],"names":["FORM_GROUP_TEST_ID","FormGroup","forwardRef","spacing","direction","role","children","rest","forwardedRef","_contextValue$getGrou","contextValue","useFormControlContext","ref","ownProps","getGroupProps","noop","mergedRef","useMergeRefs","_jsx","Stack","wrap","justify","align"],"mappings":";;;;;;;AAYA,MAAMA,kBAAkB,GAAG,mBAAmB;MAEjCC,SAAS,gBAAGC,UAAU,CACjC,SAASD,SAASA,CAChB;AAAEE,EAAAA,OAAO,GAAG,CAAC;AAAEC,EAAAA,SAAS,GAAG,UAAU;AAAEC,EAAAA,IAAI,GAAG,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC1EC,YAAY,EACZ;AAAA,EAAA,IAAAC,qBAAA;AACA,EAAA,MAAMC,YAAY,GAAGC,qBAAqB,EAAE;EAE5C,MAAM;IAAEC,GAAG;IAAE,GAAGC;AAAS,GAAC,IAAAJ,qBAAA,GAAGC,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,CAAEI,aAAa,CAACP,IAAI,CAAC,cAAAE,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI;AAChEG,IAAAA,GAAG,EAAEG,IAAI;IACT,GAAGR;GACJ;AAED,EAAA,MAAMS,SAAS,GAAGC,YAAY,CAACL,GAAG,EAAEJ,YAAY,CAAC;EAEjD,oBACEU,GAAA,CAACC,KAAK,EAAA;AACJ,IAAA,aAAA,EAAanB,kBAAmB;AAChCY,IAAAA,GAAG,EAAEI,SAAU;IACfI,IAAI,EAAA,IAAA;AACJC,IAAAA,OAAO,EAAC,OAAO;AACfC,IAAAA,KAAK,EAAC,SAAS;AACfnB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,IAAI,EAAEA,IAAK;AAAA,IAAA,GACPQ,QAAQ;AAAAP,IAAAA,QAAA,EAEXA;AAAQ,GACJ,CAAC;AAEZ,CACF;;;;"}

package/dist/esm/components/FormHelperText/FormHelperText.mjs

@@ -1,9 +1,10 @@
-import React__default, { forwardRef } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { forwardRef } from 'react';
+import classNames from '../../_virtual/index.mjs';
 import useMergeRefs from '../../hooks/useMergeRefs.mjs';
 import { noop } from '../../utils/function.mjs';
 import { isEmpty } from '../../utils/type.mjs';
 import styles from './FormHelperText.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 import { useFormControlContext } from '../FormControl/FormControl.mjs';
 import { Text } from '../Text/Text.mjs';
 
@@ -35,13 +36,15 @@ const BaseHelperText = /*#__PURE__*/forwardRef(function BaseHelperText(props, fo
   if (isEmpty(children) || !visible) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  return /*#__PURE__*/jsx(Text, {
     ref: mergedRef,
     as: "p",
     className: classNames(styles.FormHelperText, formControlClassName, className),
     typo: typo,
-    align: "left"
-  }, ownProps), children);
+    align: "left",
+    ...ownProps,
+    children: children
+  });
 });
 
 /**
@@ -66,12 +69,14 @@ const FormHelperText = /*#__PURE__*/forwardRef(function FormHelperText(props, fo
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React__default.createElement(BaseHelperText, Object.assign({
+  return /*#__PURE__*/jsx(BaseHelperText, {
     type: "info",
     ref: forwardedRef,
     color: color,
-    "data-testid": FORM_HELPER_TEXT_TEST_ID
-  }, rest), children);
+    "data-testid": FORM_HELPER_TEXT_TEST_ID,
+    ...rest,
+    children: children
+  });
 });
 
 /**
@@ -96,13 +101,15 @@ const FormErrorMessage = /*#__PURE__*/forwardRef(function FormErrorMessage(props
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React__default.createElement(BaseHelperText, Object.assign({
+  return /*#__PURE__*/jsx(BaseHelperText, {
     "aria-live": "polite",
     type: "error",
     ref: forwardedRef,
     color: color,
-    "data-testid": FORM_ERROR_MESSAGE_TEST_ID
-  }, rest), children);
+    "data-testid": FORM_ERROR_MESSAGE_TEST_ID,
+    ...rest,
+    children: children
+  });
 });
 
 export { FORM_ERROR_MESSAGE_TEST_ID, FORM_HELPER_TEXT_TEST_ID, FormErrorMessage, FormHelperText };

package/dist/esm/components/FormHelperText/FormHelperText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.mjs","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n  BaseHelperTextProps,\n  FormErrorMessageProps,\n  FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport styles from './FormHelperText.module.scss'\n\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'\nexport const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'\n\nconst BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(\n  function BaseHelperText(props, forwardedRef) {\n    const { type, typo = '13', children, className, ...rest } = props\n\n    const contextValue = useFormControlContext()\n    const getProps =\n      type === 'info'\n        ? contextValue?.getHelperTextProps\n        : contextValue?.getErrorMessageProps\n\n    const {\n      visible,\n      ref,\n      className: formControlClassName,\n      ...ownProps\n    } = getProps?.(rest) ?? {\n      visible: true,\n      ref: noop,\n      className: undefined,\n      ...rest,\n    }\n\n    const mergedRef = useMergeRefs(ref, forwardedRef)\n\n    if (isEmpty(children) || !visible) {\n      return null\n    }\n\n    return (\n      <Text\n        ref={mergedRef}\n        as=\"p\"\n        className={classNames(\n          styles.FormHelperText,\n          formControlClassName,\n          className\n        )}\n        typo={typo}\n        align=\"left\"\n        {...ownProps}\n      >\n        {children}\n      </Text>\n    )\n  }\n)\n\n/**\n * `FormHelperText` is a component to show the description of the input element.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n *   <FormLabel>\n *     Password\n *   </FormLabel>\n *   <TextField />\n *   <FormHelperText>\n *     Please use at least 6 characters\n *   </FormHelperText>\n * </FormControl>\n * ```\n */\nexport const FormHelperText = forwardRef<HTMLSpanElement, FormHelperTextProps>(\n  function FormHelperText(props, forwardedRef) {\n    const { color = 'txt-black-dark', children, ...rest } = props\n\n    return (\n      <BaseHelperText\n        type=\"info\"\n        ref={forwardedRef}\n        color={color}\n        data-testid={FORM_HELPER_TEXT_TEST_ID}\n        {...rest}\n      >\n        {children}\n      </BaseHelperText>\n    )\n  }\n)\n\n/**\n * `FormErrorMessage` is a component to show error message when form values are invalid.\n * It should be used with `FormControl` component.\n * @example\n * ```tsx\n * <FormControl>\n *   <FormLabel>\n *     Password\n *   </FormLabel>\n *   <TextField />\n *   <FormErrorMessage>\n *     Password should be at least 6 characters\n *   </FormErrorMessage>\n * </FormControl>\n * ```\n */\nexport const FormErrorMessage = forwardRef<\n  HTMLSpanElement,\n  FormErrorMessageProps\n>(function FormErrorMessage(props, forwardedRef) {\n  const { color = 'bgtxt-orange-normal', children, ...rest } = props\n\n  return (\n    <BaseHelperText\n      aria-live=\"polite\"\n      type=\"error\"\n      ref={forwardedRef}\n      color={color}\n      data-testid={FORM_ERROR_MESSAGE_TEST_ID}\n      {...rest}\n    >\n      {children}\n    </BaseHelperText>\n  )\n})\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","props","forwardedRef","_getProps","type","typo","children","className","rest","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","formControlClassName","ownProps","noop","undefined","mergedRef","useMergeRefs","isEmpty","React","createElement","Text","Object","assign","as","classNames","styles","FormHelperText","align","color","FormErrorMessage"],"mappings":"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"}
+{"version":3,"file":"FormHelperText.mjs","sources":["../../../../src/components/FormHelperText/FormHelperText.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { noop } from '~/src/utils/function'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n  BaseHelperTextProps,\n  FormErrorMessageProps,\n  FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport styles from './FormHelperText.module.scss'\n\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-form-helper-text'\nexport const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-form-error-message'\n\nconst BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(\n  function BaseHelperText(props, forwardedRef) {\n    const { type, typo = '13', children, className, ...rest } = props\n\n    const contextValue = useFormControlContext()\n    const getProps =\n      type === 'info'\n        ? contextValue?.getHelperTextProps\n        : contextValue?.getErrorMessageProps\n\n    const {\n      visible,\n      ref,\n      className: formControlClassName,\n      ...ownProps\n    } = getProps?.(rest) ?? {\n      visible: true,\n      ref: noop,\n      className: undefined,\n      ...rest,\n    }\n\n    const mergedRef = useMergeRefs(ref, forwardedRef)\n\n    if (isEmpty(children) || !visible) {\n      return null\n    }\n\n    return (\n      <Text\n        ref={mergedRef}\n        as=\"p\"\n        className={classNames(\n          styles.FormHelperText,\n          formControlClassName,\n          className\n        )}\n        typo={typo}\n        align=\"left\"\n        {...ownProps}\n      >\n        {children}\n      </Text>\n    )\n  }\n)\n\n/**\n * `FormHelperText` is a component to show the description of the input element.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n *   <FormLabel>\n *     Password\n *   </FormLabel>\n *   <TextField />\n *   <FormHelperText>\n *     Please use at least 6 characters\n *   </FormHelperText>\n * </FormControl>\n * ```\n */\nexport const FormHelperText = forwardRef<HTMLSpanElement, FormHelperTextProps>(\n  function FormHelperText(props, forwardedRef) {\n    const { color = 'txt-black-dark', children, ...rest } = props\n\n    return (\n      <BaseHelperText\n        type=\"info\"\n        ref={forwardedRef}\n        color={color}\n        data-testid={FORM_HELPER_TEXT_TEST_ID}\n        {...rest}\n      >\n        {children}\n      </BaseHelperText>\n    )\n  }\n)\n\n/**\n * `FormErrorMessage` is a component to show error message when form values are invalid.\n * It should be used with `FormControl` component.\n * @example\n * ```tsx\n * <FormControl>\n *   <FormLabel>\n *     Password\n *   </FormLabel>\n *   <TextField />\n *   <FormErrorMessage>\n *     Password should be at least 6 characters\n *   </FormErrorMessage>\n * </FormControl>\n * ```\n */\nexport const FormErrorMessage = forwardRef<\n  HTMLSpanElement,\n  FormErrorMessageProps\n>(function FormErrorMessage(props, forwardedRef) {\n  const { color = 'bgtxt-orange-normal', children, ...rest } = props\n\n  return (\n    <BaseHelperText\n      aria-live=\"polite\"\n      type=\"error\"\n      ref={forwardedRef}\n      color={color}\n      data-testid={FORM_ERROR_MESSAGE_TEST_ID}\n      {...rest}\n    >\n      {children}\n    </BaseHelperText>\n  )\n})\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","props","forwardedRef","_getProps","type","typo","children","className","rest","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","formControlClassName","ownProps","noop","undefined","mergedRef","useMergeRefs","isEmpty","_jsx","Text","as","classNames","styles","FormHelperText","align","color","FormErrorMessage"],"mappings":"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"}

package/dist/esm/components/FormLabel/FormLabel.mjs

@@ -1,8 +1,9 @@
-import React__default, { forwardRef } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { forwardRef, isValidElement } from 'react';
+import classNames from '../../_virtual/index.mjs';
 import { isEmpty } from '../../utils/type.mjs';
 import { HELP_DISPLAY_NAME, Help } from '../Help/Help.mjs';
 import styles from './FormLabel.module.scss.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFormControlContext } from '../FormControl/FormControl.mjs';
 import { Text } from '../Text/Text.mjs';
 import { LegacyHStack } from '../LegacyStack/LegacyHStack/LegacyHStack.mjs';
@@ -46,7 +47,7 @@ const FormLabel = /*#__PURE__*/forwardRef(function FormLabel(props, forwardedRef
     if (isEmpty(help)) {
       return null;
     }
-    if (/*#__PURE__*/React__default.isValidElement(help)) {
+    if (/*#__PURE__*/isValidElement(help)) {
       // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정
       const {
         displayName
@@ -55,28 +56,36 @@ const FormLabel = /*#__PURE__*/forwardRef(function FormLabel(props, forwardedRef
         return help;
       }
     }
-    return /*#__PURE__*/React__default.createElement(Help, null, help);
+    return /*#__PURE__*/jsx(Help, {
+      children: help
+    });
   })();
-  const LabelComponent = /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  const LabelComponent = /*#__PURE__*/jsx(Text, {
     className: classNames(styles.LabelText, !HelpComponent && formControlClassName, className),
     ref: forwardedRef,
     as: "label",
     align: "left",
     bold: bold,
     color: color,
-    "data-testid": FORM_LABEL_TEST_ID
-  }, ownProps), children);
+    "data-testid": FORM_LABEL_TEST_ID,
+    ...ownProps,
+    children: children
+  });
   if (isEmpty(children)) {
     return null;
   }
-  return !HelpComponent ? LabelComponent : /*#__PURE__*/React__default.createElement(LegacyHStack, {
+  return !HelpComponent ? LabelComponent : /*#__PURE__*/jsxs(LegacyHStack, {
     align: "center",
     spacing: 6,
-    className: formControlClassName
-  }, /*#__PURE__*/React__default.createElement(LegacyStackItem, {
-    shrink: true,
-    weight: 1
-  }, LabelComponent), /*#__PURE__*/React__default.createElement(LegacyStackItem, null, HelpComponent));
+    className: formControlClassName,
+    children: [/*#__PURE__*/jsx(LegacyStackItem, {
+      shrink: true,
+      weight: 1,
+      children: LabelComponent
+    }), /*#__PURE__*/jsx(LegacyStackItem, {
+      children: HelpComponent
+    })]
+  });
 });
 
 export { FORM_LABEL_TEST_ID, FormLabel };

package/dist/esm/components/FormLabel/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Help } from '~/src/components/Help'\nimport { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'\nimport { LegacyHStack, LegacyStackItem } from '~/src/components/LegacyStack'\nimport { Text } from '~/src/components/Text'\n\nimport { type FormLabelProps } from './FormLabel.types'\n\nimport styles from './FormLabel.module.scss'\n\nexport const FORM_LABEL_TEST_ID = 'bezier-form-label'\n\n/**\n * `FormLabel` is a component to show label.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n *   <FormLabel>\n *     Name\n *   </FormLabel>\n *   <TextField />\n * </FormControl>\n * ```\n */\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(\n  function FormLabel(props, forwardedRef) {\n    const {\n      help,\n      bold = true,\n      color = 'txt-black-darkest',\n      className,\n      children,\n      ...rest\n    } = props\n\n    const contextValue = useFormControlContext()\n    const { className: formControlClassName, ...ownProps } =\n      contextValue?.getLabelProps(rest) ?? {\n        typo: '13',\n        className: undefined,\n        ...rest,\n      }\n\n    const HelpComponent = (() => {\n      if (isEmpty(help)) {\n        return null\n      }\n\n      if (React.isValidElement(help)) {\n        // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정\n        const { displayName } = help?.type as any\n        if (displayName === HELP_DISPLAY_NAME) {\n          return help\n        }\n      }\n\n      return <Help>{help}</Help>\n    })()\n\n    const LabelComponent = (\n      <Text\n        className={classNames(\n          styles.LabelText,\n          !HelpComponent && formControlClassName,\n          className\n        )}\n        ref={forwardedRef}\n        as=\"label\"\n        align=\"left\"\n        bold={bold}\n        color={color}\n        data-testid={FORM_LABEL_TEST_ID}\n        {...ownProps}\n      >\n        {children}\n      </Text>\n    )\n\n    if (isEmpty(children)) {\n      return null\n    }\n\n    return !HelpComponent ? (\n      LabelComponent\n    ) : (\n      <LegacyHStack\n        align=\"center\"\n        spacing={6}\n        className={formControlClassName}\n      >\n        <LegacyStackItem\n          shrink\n          weight={1}\n        >\n          {LabelComponent}\n        </LegacyStackItem>\n        <LegacyStackItem>{HelpComponent}</LegacyStackItem>\n      </LegacyHStack>\n    )\n  }\n)\n"],"names":["FORM_LABEL_TEST_ID","FormLabel","forwardRef","props","forwardedRef","_contextValue$getLabe","help","bold","color","className","children","rest","contextValue","useFormControlContext","formControlClassName","ownProps","getLabelProps","typo","undefined","HelpComponent","isEmpty","React","isValidElement","displayName","type","HELP_DISPLAY_NAME","createElement","Help","LabelComponent","Text","Object","assign","classNames","styles","LabelText","ref","as","align","LegacyHStack","spacing","LegacyStackItem","shrink","weight"],"mappings":";;;;;;;;;;AAkBO,MAAMA,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,gBAAGC,UAAU,CACjC,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;AAAA,EAAA,IAAAC,qBAAA;EACtC,MAAM;IACJC,IAAI;AACJC,IAAAA,IAAI,GAAG,IAAI;AACXC,IAAAA,KAAK,GAAG,mBAAmB;IAC3BC,SAAS;IACTC,QAAQ;IACR,GAAGC;AACL,GAAC,GAAGR,KAAK;AAET,EAAA,MAAMS,YAAY,GAAGC,qBAAqB,EAAE;EAC5C,MAAM;AAAEJ,IAAAA,SAAS,EAAEK,oBAAoB;IAAE,GAAGC;AAAS,GAAC,IAAAV,qBAAA,GACpDO,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,CAAEI,aAAa,CAACL,IAAI,CAAC,cAAAN,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI;AACnCY,IAAAA,IAAI,EAAE,IAAI;AACVR,IAAAA,SAAS,EAAES,SAAS;IACpB,GAAGP;GACJ;EAEH,MAAMQ,aAAa,GAAG,CAAC,MAAM;AAC3B,IAAA,IAAIC,OAAO,CAACd,IAAI,CAAC,EAAE;AACjB,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,iBAAIe,cAAK,CAACC,cAAc,CAAChB,IAAI,CAAC,EAAE;AAC9B;MACA,MAAM;AAAEiB,QAAAA;AAAY,OAAC,GAAGjB,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEkB,IAAW;MACzC,IAAID,WAAW,KAAKE,iBAAiB,EAAE;AACrC,QAAA,OAAOnB,IAAI;AACb;AACF;AAEA,IAAA,oBAAOe,cAAA,CAAAK,aAAA,CAACC,IAAI,EAAA,IAAA,EAAErB,IAAW,CAAC;AAC5B,GAAC,GAAG;EAEJ,MAAMsB,cAAc,gBAClBP,cAAA,CAAAK,aAAA,CAACG,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHtB,IAAAA,SAAS,EAAEuB,UAAU,CACnBC,MAAM,CAACC,SAAS,EAChB,CAACf,aAAa,IAAIL,oBAAoB,EACtCL,SACF,CAAE;AACF0B,IAAAA,GAAG,EAAE/B,YAAa;AAClBgC,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,KAAK,EAAC,MAAM;AACZ9B,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;IACb,aAAaR,EAAAA;GACTe,EAAAA,QAAQ,CAEXL,EAAAA,QACG,CACP;AAED,EAAA,IAAIU,OAAO,CAACV,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,OAAO,CAACS,aAAa,GACnBS,cAAc,gBAEdP,cAAA,CAAAK,aAAA,CAACY,YAAY,EAAA;AACXD,IAAAA,KAAK,EAAC,QAAQ;AACdE,IAAAA,OAAO,EAAE,CAAE;AACX9B,IAAAA,SAAS,EAAEK;AAAqB,GAAA,eAEhCO,cAAA,CAAAK,aAAA,CAACc,eAAe,EAAA;IACdC,MAAM,EAAA,IAAA;AACNC,IAAAA,MAAM,EAAE;GAEPd,EAAAA,cACc,CAAC,eAClBP,cAAA,CAAAK,aAAA,CAACc,eAAe,EAAA,IAAA,EAAErB,aAA+B,CACrC,CACf;AACH,CACF;;;;"}
+{"version":3,"file":"FormLabel.mjs","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useFormControlContext } from '~/src/components/FormControl'\nimport { Help } from '~/src/components/Help'\nimport { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'\nimport { LegacyHStack, LegacyStackItem } from '~/src/components/LegacyStack'\nimport { Text } from '~/src/components/Text'\n\nimport { type FormLabelProps } from './FormLabel.types'\n\nimport styles from './FormLabel.module.scss'\n\nexport const FORM_LABEL_TEST_ID = 'bezier-form-label'\n\n/**\n * `FormLabel` is a component to show label.\n * `FormControl` component can handle its layout by `position` props.\n * @example\n * ```tsx\n * <FormControl position=\"top\">\n *   <FormLabel>\n *     Name\n *   </FormLabel>\n *   <TextField />\n * </FormControl>\n * ```\n */\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(\n  function FormLabel(props, forwardedRef) {\n    const {\n      help,\n      bold = true,\n      color = 'txt-black-darkest',\n      className,\n      children,\n      ...rest\n    } = props\n\n    const contextValue = useFormControlContext()\n    const { className: formControlClassName, ...ownProps } =\n      contextValue?.getLabelProps(rest) ?? {\n        typo: '13',\n        className: undefined,\n        ...rest,\n      }\n\n    const HelpComponent = (() => {\n      if (isEmpty(help)) {\n        return null\n      }\n\n      if (isValidElement(help)) {\n        // FIXME(@bora): string, JSXElementCostructor 타입에 displayName 속성이 존재하지 않음, 임시로 any 타입으로 설정\n        const { displayName } = help?.type as any\n        if (displayName === HELP_DISPLAY_NAME) {\n          return help\n        }\n      }\n\n      return <Help>{help}</Help>\n    })()\n\n    const LabelComponent = (\n      <Text\n        className={classNames(\n          styles.LabelText,\n          !HelpComponent && formControlClassName,\n          className\n        )}\n        ref={forwardedRef}\n        as=\"label\"\n        align=\"left\"\n        bold={bold}\n        color={color}\n        data-testid={FORM_LABEL_TEST_ID}\n        {...ownProps}\n      >\n        {children}\n      </Text>\n    )\n\n    if (isEmpty(children)) {\n      return null\n    }\n\n    return !HelpComponent ? (\n      LabelComponent\n    ) : (\n      <LegacyHStack\n        align=\"center\"\n        spacing={6}\n        className={formControlClassName}\n      >\n        <LegacyStackItem\n          shrink\n          weight={1}\n        >\n          {LabelComponent}\n        </LegacyStackItem>\n        <LegacyStackItem>{HelpComponent}</LegacyStackItem>\n      </LegacyHStack>\n    )\n  }\n)\n"],"names":["FORM_LABEL_TEST_ID","FormLabel","forwardRef","props","forwardedRef","_contextValue$getLabe","help","bold","color","className","children","rest","contextValue","useFormControlContext","formControlClassName","ownProps","getLabelProps","typo","undefined","HelpComponent","isEmpty","isValidElement","displayName","type","HELP_DISPLAY_NAME","_jsx","Help","LabelComponent","Text","classNames","styles","LabelText","ref","as","align","_jsxs","LegacyHStack","spacing","LegacyStackItem","shrink","weight"],"mappings":";;;;;;;;;;;AAkBO,MAAMA,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,gBAAGC,UAAU,CACjC,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;AAAA,EAAA,IAAAC,qBAAA;EACtC,MAAM;IACJC,IAAI;AACJC,IAAAA,IAAI,GAAG,IAAI;AACXC,IAAAA,KAAK,GAAG,mBAAmB;IAC3BC,SAAS;IACTC,QAAQ;IACR,GAAGC;AACL,GAAC,GAAGR,KAAK;AAET,EAAA,MAAMS,YAAY,GAAGC,qBAAqB,EAAE;EAC5C,MAAM;AAAEJ,IAAAA,SAAS,EAAEK,oBAAoB;IAAE,GAAGC;AAAS,GAAC,IAAAV,qBAAA,GACpDO,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,CAAEI,aAAa,CAACL,IAAI,CAAC,cAAAN,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI;AACnCY,IAAAA,IAAI,EAAE,IAAI;AACVR,IAAAA,SAAS,EAAES,SAAS;IACpB,GAAGP;GACJ;EAEH,MAAMQ,aAAa,GAAG,CAAC,MAAM;AAC3B,IAAA,IAAIC,OAAO,CAACd,IAAI,CAAC,EAAE;AACjB,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,iBAAIe,cAAc,CAACf,IAAI,CAAC,EAAE;AACxB;MACA,MAAM;AAAEgB,QAAAA;AAAY,OAAC,GAAGhB,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAJA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEiB,IAAW;MACzC,IAAID,WAAW,KAAKE,iBAAiB,EAAE;AACrC,QAAA,OAAOlB,IAAI;AACb;AACF;IAEA,oBAAOmB,GAAA,CAACC,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEJ;AAAI,KAAO,CAAC;AAC5B,GAAC,GAAG;AAEJ,EAAA,MAAMqB,cAAc,gBAClBF,GAAA,CAACG,IAAI,EAAA;AACHnB,IAAAA,SAAS,EAAEoB,UAAU,CACnBC,MAAM,CAACC,SAAS,EAChB,CAACZ,aAAa,IAAIL,oBAAoB,EACtCL,SACF,CAAE;AACFuB,IAAAA,GAAG,EAAE5B,YAAa;AAClB6B,IAAAA,EAAE,EAAC,OAAO;AACVC,IAAAA,KAAK,EAAC,MAAM;AACZ3B,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,aAAA,EAAaR,kBAAmB;AAAA,IAAA,GAC5Be,QAAQ;AAAAL,IAAAA,QAAA,EAEXA;AAAQ,GACL,CACP;AAED,EAAA,IAAIU,OAAO,CAACV,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;AAEA,EAAA,OAAO,CAACS,aAAa,GACnBQ,cAAc,gBAEdQ,IAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,KAAK,EAAC,QAAQ;AACdG,IAAAA,OAAO,EAAE,CAAE;AACX5B,IAAAA,SAAS,EAAEK,oBAAqB;IAAAJ,QAAA,EAAA,cAEhCe,GAAA,CAACa,eAAe,EAAA;MACdC,MAAM,EAAA,IAAA;AACNC,MAAAA,MAAM,EAAE,CAAE;AAAA9B,MAAAA,QAAA,EAETiB;AAAc,KACA,CAAC,eAClBF,GAAA,CAACa,eAAe,EAAA;AAAA5B,MAAAA,QAAA,EAAES;AAAa,KAAkB,CAAC;AAAA,GACtC,CACf;AACH,CACF;;;;"}

package/dist/esm/components/Help/Help.mjs

@@ -1,7 +1,8 @@
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { HelpFilledIcon } from '@channel.io/bezier-icons';
 import { isEmpty } from '../../utils/type.mjs';
 import styles from './Help.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '../Tooltip/Tooltip.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 
@@ -14,18 +15,21 @@ const Help = /*#__PURE__*/forwardRef(function Help({
   if (isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, rest, {
+  return /*#__PURE__*/jsx(Tooltip, {
+    ...rest,
     ref: forwardedRef,
-    content: children
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles.Help
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    className: styles.Icon,
-    source: HelpFilledIcon,
-    size: "xs",
-    color: "txt-black-dark",
-    "data-testid": HELP_TEST_ID
-  })));
+    content: children,
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.Help,
+      children: /*#__PURE__*/jsx(Icon, {
+        className: styles.Icon,
+        source: HelpFilledIcon,
+        size: "xs",
+        color: "txt-black-dark",
+        "data-testid": HELP_TEST_ID
+      })
+    })
+  });
 });
 Help.displayName = HELP_DISPLAY_NAME;
 

package/dist/esm/components/Help/Help.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Help.mjs","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type HelpProps } from './Help.types'\n\nimport styles from './Help.module.scss'\n\nexport const HELP_TEST_ID = 'bezier-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nexport const Help = forwardRef<HTMLDivElement, HelpProps>(function Help(\n  { children, ...rest },\n  forwardedRef\n) {\n  if (isEmpty(children)) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      {...rest}\n      ref={forwardedRef}\n      content={children}\n    >\n      <div className={styles.Help}>\n        <Icon\n          className={styles.Icon}\n          source={HelpFilledIcon}\n          size=\"xs\"\n          color=\"txt-black-dark\"\n          data-testid={HELP_TEST_ID}\n        />\n      </div>\n    </Tooltip>\n  )\n})\n\nHelp.displayName = HELP_DISPLAY_NAME\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","forwardRef","children","rest","forwardedRef","isEmpty","React","createElement","Tooltip","Object","assign","ref","content","className","styles","Icon","source","HelpFilledIcon","size","color","displayName"],"mappings":";;;;;;;AAeO,MAAMA,YAAY,GAAG;AACrB,MAAMC,iBAAiB,GAAG;MAEpBC,IAAI,gBAAGC,UAAU,CAA4B,SAASD,IAAIA,CACrE;EAAEE,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrBC,YAAY,EACZ;AACA,EAAA,IAAIC,OAAO,CAACH,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,oBACEI,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFP,IAAI,EAAA;AACRQ,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,OAAO,EAAEV;GAETI,CAAAA,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,MAAM,CAACd;AAAK,GAAA,eAC1BM,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;IACHF,SAAS,EAAEC,MAAM,CAACC,IAAK;AACvBC,IAAAA,MAAM,EAAEC,cAAe;AACvBC,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,KAAK,EAAC,gBAAgB;IACtB,aAAarB,EAAAA;GACd,CACE,CACE,CAAC;AAEd,CAAC;AAEDE,IAAI,CAACoB,WAAW,GAAGrB,iBAAiB;;;;"}
+{"version":3,"file":"Help.mjs","sources":["../../../../src/components/Help/Help.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { HelpFilledIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type HelpProps } from './Help.types'\n\nimport styles from './Help.module.scss'\n\nexport const HELP_TEST_ID = 'bezier-help'\nexport const HELP_DISPLAY_NAME = 'Help'\n\nexport const Help = forwardRef<HTMLDivElement, HelpProps>(function Help(\n  { children, ...rest },\n  forwardedRef\n) {\n  if (isEmpty(children)) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      {...rest}\n      ref={forwardedRef}\n      content={children}\n    >\n      <div className={styles.Help}>\n        <Icon\n          className={styles.Icon}\n          source={HelpFilledIcon}\n          size=\"xs\"\n          color=\"txt-black-dark\"\n          data-testid={HELP_TEST_ID}\n        />\n      </div>\n    </Tooltip>\n  )\n})\n\nHelp.displayName = HELP_DISPLAY_NAME\n"],"names":["HELP_TEST_ID","HELP_DISPLAY_NAME","Help","forwardRef","children","rest","forwardedRef","isEmpty","_jsx","Tooltip","ref","content","className","styles","Icon","source","HelpFilledIcon","size","color","displayName"],"mappings":";;;;;;;;AAeO,MAAMA,YAAY,GAAG;AACrB,MAAMC,iBAAiB,GAAG;MAEpBC,IAAI,gBAAGC,UAAU,CAA4B,SAASD,IAAIA,CACrE;EAAEE,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrBC,YAAY,EACZ;AACA,EAAA,IAAIC,OAAO,CAACH,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,oBACEI,GAAA,CAACC,OAAO,EAAA;AAAA,IAAA,GACFJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,OAAO,EAAEP,QAAS;AAAAA,IAAAA,QAAA,eAElBI,GAAA,CAAA,KAAA,EAAA;MAAKI,SAAS,EAAEC,MAAM,CAACX,IAAK;MAAAE,QAAA,eAC1BI,GAAA,CAACM,IAAI,EAAA;QACHF,SAAS,EAAEC,MAAM,CAACC,IAAK;AACvBC,QAAAA,MAAM,EAAEC,cAAe;AACvBC,QAAAA,IAAI,EAAC,IAAI;AACTC,QAAAA,KAAK,EAAC,gBAAgB;QACtB,aAAalB,EAAAA;OACd;KACE;AAAC,GACC,CAAC;AAEd,CAAC;AAEDE,IAAI,CAACiB,WAAW,GAAGlB,iBAAiB;;;;"}

package/dist/esm/components/Icon/Icon.mjs

@@ -1,8 +1,9 @@
-import React__default, { memo, forwardRef } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { memo, forwardRef } from 'react';
+import classNames from '../../_virtual/index.mjs';
 import { getMarginStyles, splitByMarginProps } from '../../types/props-helpers.mjs';
 import { tokenCssVar } from '../../utils/style.mjs';
 import styles from './Icon.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 const ICON_TEST_ID = 'bezier-icon';
 const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Icon(props, forwardedRef) {
@@ -16,7 +17,7 @@ const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Icon(props, forw
     style,
     ...rest
   } = marginRest;
-  return /*#__PURE__*/React__default.createElement(SourceElement, Object.assign({
+  return /*#__PURE__*/jsx(SourceElement, {
     ref: forwardedRef,
     style: {
       '--b-icon-color': tokenCssVar(color),
@@ -24,8 +25,9 @@ const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Icon(props, forw
       ...style
     },
     className: classNames(styles.Icon, styles[`size-${size}`], marginStyles.className, className),
-    "data-testid": ICON_TEST_ID
-  }, rest));
+    "data-testid": ICON_TEST_ID,
+    ...rest
+  });
 }));
 
 export { ICON_TEST_ID, Icon };

package/dist/esm/components/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, memo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { tokenCssVar } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const marginStyles = getMarginStyles(marginProps)\n\n    const {\n      className,\n      size = 'm',\n      color,\n      source: SourceElement,\n      style,\n      ...rest\n    } = marginRest\n\n    return (\n      <SourceElement\n        ref={forwardedRef}\n        style={\n          {\n            '--b-icon-color': tokenCssVar(color),\n            ...marginStyles.style,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.Icon,\n          styles[`size-${size}`],\n          marginStyles.className,\n          className\n        )}\n        data-testid={ICON_TEST_ID}\n        {...rest}\n      />\n    )\n  })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","React","createElement","Object","assign","ref","tokenCssVar","classNames","styles"],"mappings":";;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,IAAI,cACtBC,UAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;IACrBC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,cAAA,CAAAC,aAAA,CAACJ,aAAa,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACZC,IAAAA,GAAG,EAAEjB,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEO,WAAW,CAACV,KAAK,CAAC;MACpC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEa,UAAU,CACnBC,MAAM,CAACxB,IAAI,EACXwB,MAAM,CAAC,QAAQb,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;IACF,aAAaX,EAAAA;GACTiB,EAAAA,IAAI,CACT,CAAC;AAEN,CAAC,CACH;;;;"}
+{"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { tokenCssVar } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const marginStyles = getMarginStyles(marginProps)\n\n    const {\n      className,\n      size = 'm',\n      color,\n      source: SourceElement,\n      style,\n      ...rest\n    } = marginRest\n\n    return (\n      <SourceElement\n        ref={forwardedRef}\n        style={\n          {\n            '--b-icon-color': tokenCssVar(color),\n            ...marginStyles.style,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.Icon,\n          styles[`size-${size}`],\n          marginStyles.className,\n          className\n        )}\n        data-testid={ICON_TEST_ID}\n        {...rest}\n      />\n    )\n  })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","tokenCssVar","classNames","styles"],"mappings":";;;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,IAAI,cACtBC,UAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;IACrBC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,GAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,WAAW,CAACP,KAAK,CAAC;MACpC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,UAAU,CACnBC,MAAM,CAACrB,IAAI,EACXqB,MAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;AACF,IAAA,aAAA,EAAaX,YAAa;IAAA,GACtBiB;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;"}