@channel.io/bezier-react 2.6.2 → 3.0.1

package/dist/cjs/components/FormGroup/FormGroup.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
 var _function = require('../../utils/function.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FormControl = require('../FormControl/FormControl.js');
 var Stack = require('../Stack/Stack.js');
 
@@ -24,7 +25,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup({
     ...rest
   };
   const mergedRef = useMergeRefs.default(ref, forwardedRef);
-  return /*#__PURE__*/React.createElement(Stack.Stack, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(Stack.Stack, {
     "data-testid": FORM_GROUP_TEST_ID,
     ref: mergedRef,
     wrap: true,
@@ -32,8 +33,10 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup({
     align: "stretch",
     spacing: spacing,
     direction: direction,
-    role: role
-  }, ownProps), children);
+    role: role,
+    ...ownProps,
+    children: children
+  });
 });
 
 exports.FormGroup = FormGroup;

package/dist/cjs/components/FormGroup/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","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,gBAAU,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,iCAAqB,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,cAAI;IACT,GAAGR;GACJ;AAED,EAAA,MAAMS,SAAS,GAAGC,oBAAY,CAACL,GAAG,EAAEJ,YAAY,CAAC;EAEjD,oBACEU,KAAA,CAAAC,aAAA,CAACC,WAAK,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.js","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,gBAAU,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,iCAAqB,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,cAAI;IACT,GAAGR;GACJ;AAED,EAAA,MAAMS,SAAS,GAAGC,oBAAY,CAACL,GAAG,EAAEJ,YAAY,CAAC;EAEjD,oBACEU,cAAA,CAACC,WAAK,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/cjs/components/FormHelperText/FormHelperText.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
 var _function = require('../../utils/function.js');
 var type = require('../../utils/type.js');
 var FormHelperText_module = require('./FormHelperText.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FormControl = require('../FormControl/FormControl.js');
 var Text = require('../Text/Text.js');
 
@@ -37,13 +38,15 @@ const BaseHelperText = /*#__PURE__*/React.forwardRef(function BaseHelperText(pro
   if (type.isEmpty(children) || !visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Text.Text, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
     ref: mergedRef,
     as: "p",
     className: index.default(FormHelperText_module.default.FormHelperText, formControlClassName, className),
     typo: typo,
-    align: "left"
-  }, ownProps), children);
+    align: "left",
+    ...ownProps,
+    children: children
+  });
 });
 
 /**
@@ -68,12 +71,14 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(pro
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({
+  return /*#__PURE__*/jsxRuntime.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
+  });
 });
 
 /**
@@ -98,13 +103,15 @@ const FormErrorMessage = /*#__PURE__*/React.forwardRef(function FormErrorMessage
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({
+  return /*#__PURE__*/jsxRuntime.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
+  });
 });
 
 exports.FORM_ERROR_MESSAGE_TEST_ID = FORM_ERROR_MESSAGE_TEST_ID;

package/dist/cjs/components/FormHelperText/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","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.js","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/cjs/components/FormLabel/FormLabel.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var type = require('../../utils/type.js');
 var Help = require('../Help/Help.js');
 var FormLabel_module = require('./FormLabel.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FormControl = require('../FormControl/FormControl.js');
 var Text = require('../Text/Text.js');
 var LegacyHStack = require('../LegacyStack/LegacyHStack/LegacyHStack.js');
@@ -57,28 +58,36 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(props, forwar
         return help;
       }
     }
-    return /*#__PURE__*/React.createElement(Help.Help, null, help);
+    return /*#__PURE__*/jsxRuntime.jsx(Help.Help, {
+      children: help
+    });
   })();
-  const LabelComponent = /*#__PURE__*/React.createElement(Text.Text, Object.assign({
+  const LabelComponent = /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
     className: index.default(FormLabel_module.default.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 (type.isEmpty(children)) {
     return null;
   }
-  return !HelpComponent ? LabelComponent : /*#__PURE__*/React.createElement(LegacyHStack.LegacyHStack, {
+  return !HelpComponent ? LabelComponent : /*#__PURE__*/jsxRuntime.jsxs(LegacyHStack.LegacyHStack, {
     align: "center",
     spacing: 6,
-    className: formControlClassName
-  }, /*#__PURE__*/React.createElement(LegacyStackItem.LegacyStackItem, {
-    shrink: true,
-    weight: 1
-  }, LabelComponent), /*#__PURE__*/React.createElement(LegacyStackItem.LegacyStackItem, null, HelpComponent));
+    className: formControlClassName,
+    children: [/*#__PURE__*/jsxRuntime.jsx(LegacyStackItem.LegacyStackItem, {
+      shrink: true,
+      weight: 1,
+      children: LabelComponent
+    }), /*#__PURE__*/jsxRuntime.jsx(LegacyStackItem.LegacyStackItem, {
+      children: HelpComponent
+    })]
+  });
 });
 
 exports.FORM_LABEL_TEST_ID = FORM_LABEL_TEST_ID;

package/dist/cjs/components/FormLabel/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","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,gBAAU,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,iCAAqB,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,YAAO,CAACd,IAAI,CAAC,EAAE;AACjB,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,iBAAIe,KAAK,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,sBAAiB,EAAE;AACrC,QAAA,OAAOnB,IAAI;AACb;AACF;AAEA,IAAA,oBAAOe,KAAA,CAAAK,aAAA,CAACC,SAAI,EAAA,IAAA,EAAErB,IAAW,CAAC;AAC5B,GAAC,GAAG;EAEJ,MAAMsB,cAAc,gBAClBP,KAAA,CAAAK,aAAA,CAACG,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHtB,IAAAA,SAAS,EAAEuB,aAAU,CACnBC,wBAAM,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,YAAO,CAACV,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,OAAO,CAACS,aAAa,GACnBS,cAAc,gBAEdP,KAAA,CAAAK,aAAA,CAACY,yBAAY,EAAA;AACXD,IAAAA,KAAK,EAAC,QAAQ;AACdE,IAAAA,OAAO,EAAE,CAAE;AACX9B,IAAAA,SAAS,EAAEK;AAAqB,GAAA,eAEhCO,KAAA,CAAAK,aAAA,CAACc,+BAAe,EAAA;IACdC,MAAM,EAAA,IAAA;AACNC,IAAAA,MAAM,EAAE;GAEPd,EAAAA,cACc,CAAC,eAClBP,KAAA,CAAAK,aAAA,CAACc,+BAAe,EAAA,IAAA,EAAErB,aAA+B,CACrC,CACf;AACH,CACF;;;;;"}
+{"version":3,"file":"FormLabel.js","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,gBAAU,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,iCAAqB,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,YAAO,CAACd,IAAI,CAAC,EAAE;AACjB,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,iBAAIe,oBAAc,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,sBAAiB,EAAE;AACrC,QAAA,OAAOlB,IAAI;AACb;AACF;IAEA,oBAAOmB,cAAA,CAACC,SAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEJ;AAAI,KAAO,CAAC;AAC5B,GAAC,GAAG;AAEJ,EAAA,MAAMqB,cAAc,gBAClBF,cAAA,CAACG,SAAI,EAAA;AACHnB,IAAAA,SAAS,EAAEoB,aAAU,CACnBC,wBAAM,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,YAAO,CAACV,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;AAEA,EAAA,OAAO,CAACS,aAAa,GACnBQ,cAAc,gBAEdQ,eAAA,CAACC,yBAAY,EAAA;AACXF,IAAAA,KAAK,EAAC,QAAQ;AACdG,IAAAA,OAAO,EAAE,CAAE;AACX5B,IAAAA,SAAS,EAAEK,oBAAqB;IAAAJ,QAAA,EAAA,cAEhCe,cAAA,CAACa,+BAAe,EAAA;MACdC,MAAM,EAAA,IAAA;AACNC,MAAAA,MAAM,EAAE,CAAE;AAAA9B,MAAAA,QAAA,EAETiB;AAAc,KACA,CAAC,eAClBF,cAAA,CAACa,+BAAe,EAAA;AAAA5B,MAAAA,QAAA,EAAES;AAAa,KAAkB,CAAC;AAAA,GACtC,CACf;AACH,CACF;;;;;"}

package/dist/cjs/components/Help/Help.js

@@ -4,6 +4,7 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var type = require('../../utils/type.js');
 var Help_module = require('./Help.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var Icon = require('../Icon/Icon.js');
 
@@ -16,18 +17,21 @@ const Help = /*#__PURE__*/React.forwardRef(function Help({
   if (type.isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Tooltip.Tooltip, Object.assign({}, rest, {
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+    ...rest,
     ref: forwardedRef,
-    content: children
-  }), /*#__PURE__*/React.createElement("div", {
-    className: Help_module.default.Help
-  }, /*#__PURE__*/React.createElement(Icon.Icon, {
-    className: Help_module.default.Icon,
-    source: bezierIcons.HelpFilledIcon,
-    size: "xs",
-    color: "txt-black-dark",
-    "data-testid": HELP_TEST_ID
-  })));
+    content: children,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: Help_module.default.Help,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        className: Help_module.default.Icon,
+        source: bezierIcons.HelpFilledIcon,
+        size: "xs",
+        color: "txt-black-dark",
+        "data-testid": HELP_TEST_ID
+      })
+    })
+  });
 });
 Help.displayName = HELP_DISPLAY_NAME;
 

package/dist/cjs/components/Help/Help.js.map

@@ -1 +1 @@
-{"version":3,"file":"Help.js","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,gBAAU,CAA4B,SAASD,IAAIA,CACrE;EAAEE,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrBC,YAAY,EACZ;AACA,EAAA,IAAIC,YAAO,CAACH,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,oBACEI,KAAA,CAAAC,aAAA,CAACC,eAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACFP,IAAI,EAAA;AACRQ,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,OAAO,EAAEV;GAETI,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKM,SAAS,EAAEC,mBAAM,CAACd;AAAK,GAAA,eAC1BM,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;IACHF,SAAS,EAAEC,mBAAM,CAACC,IAAK;AACvBC,IAAAA,MAAM,EAAEC,0BAAe;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.js","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,gBAAU,CAA4B,SAASD,IAAIA,CACrE;EAAEE,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrBC,YAAY,EACZ;AACA,EAAA,IAAIC,YAAO,CAACH,QAAQ,CAAC,EAAE;AACrB,IAAA,OAAO,IAAI;AACb;EAEA,oBACEI,cAAA,CAACC,eAAO,EAAA;AAAA,IAAA,GACFJ,IAAI;AACRK,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,OAAO,EAAEP,QAAS;AAAAA,IAAAA,QAAA,eAElBI,cAAA,CAAA,KAAA,EAAA;MAAKI,SAAS,EAAEC,mBAAM,CAACX,IAAK;MAAAE,QAAA,eAC1BI,cAAA,CAACM,SAAI,EAAA;QACHF,SAAS,EAAEC,mBAAM,CAACC,IAAK;AACvBC,QAAAA,MAAM,EAAEC,0BAAe;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/cjs/components/Icon/Icon.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var propsHelpers = require('../../types/props-helpers.js');
 var style = require('../../utils/style.js');
 var Icon_module = require('./Icon.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 const ICON_TEST_ID = 'bezier-icon';
 const Icon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Icon(props, forwardedRef) {
@@ -18,7 +19,7 @@ const Icon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Icon
     style: style$1,
     ...rest
   } = marginRest;
-  return /*#__PURE__*/React.createElement(SourceElement, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(SourceElement, {
     ref: forwardedRef,
     style: {
       '--b-icon-color': style.tokenCssVar(color),
@@ -26,8 +27,9 @@ const Icon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Icon
       ...style$1
     },
     className: index.default(Icon_module.default.Icon, Icon_module.default[`size-${size}`], marginStyles.className, className),
-    "data-testid": ICON_TEST_ID
-  }, rest));
+    "data-testid": ICON_TEST_ID,
+    ...rest
+  });
 }));
 
 exports.ICON_TEST_ID = ICON_TEST_ID;

package/dist/cjs/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","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,UAAI,cACtBC,gBAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;WACrBC,OAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,KAAA,CAAAC,aAAA,CAACJ,aAAa,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACZC,IAAAA,GAAG,EAAEjB,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEO,iBAAW,CAACV,KAAK,CAAC;MACpC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEa,aAAU,CACnBC,mBAAM,CAACxB,IAAI,EACXwB,mBAAM,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.js","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,UAAI,cACtBC,gBAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;WACrBC,OAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,cAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,iBAAW,CAACP,KAAK,CAAC;MACpC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,aAAU,CACnBC,mBAAM,CAACrB,IAAI,EACXqB,mBAAM,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;;;;;"}

package/dist/cjs/components/KeyValueItem/KeyValueItem.js

@@ -2,13 +2,33 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var type = require('../../utils/type.js');
 var KeyValueItem_module = require('./KeyValueItem.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
-var Tooltip = require('../Tooltip/Tooltip.js');
 var Button = require('../Button/Button.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const KEY_VALUE_ITEM_TEST_ID = 'bezier-key-value-item';
 const KEY_VALUE_ITEM_KEY_ICON_TEST_ID = 'bezier-key-value-item-key-icon';
@@ -16,30 +36,33 @@ function KeyItem({
   icon,
   children
 }) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: KeyValueItem_module.default.KeyItem
-  }, bezierIcons.isBezierIcon(icon) ? /*#__PURE__*/React.createElement(Icon.Icon, {
-    size: "s",
-    source: icon,
-    color: "txt-black-dark",
-    "data-testid": KEY_VALUE_ITEM_KEY_ICON_TEST_ID
-  }) : icon, /*#__PURE__*/React.createElement(Text.Text, {
-    className: KeyValueItem_module.default.KeyText,
-    bold: true,
-    typo: "12",
-    color: "txt-black-dark",
-    truncated: true
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: KeyValueItem_module.default.KeyItem,
+    children: [bezierIcons.isBezierIcon(icon) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "s",
+      source: icon,
+      color: "txt-black-dark",
+      "data-testid": KEY_VALUE_ITEM_KEY_ICON_TEST_ID
+    }) : icon, /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+      className: KeyValueItem_module.default.KeyText,
+      bold: true,
+      typo: "12",
+      color: "txt-black-dark",
+      truncated: true,
+      children: children
+    })]
+  });
 }
 function ValueItem({
   truncated,
   children
 }) {
-  return /*#__PURE__*/React.createElement(Text.Text, {
+  return /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
     className: KeyValueItem_module.default.ValueItem,
     typo: "14",
-    truncated: truncated
-  }, children);
+    truncated: truncated,
+    children: children
+  });
 }
 function isItemActionWithIcon(args) {
   return 'icon' in args;
@@ -51,16 +74,19 @@ function ActionButton({
     return children;
   }
   const withTooltip = !type.isEmpty(children.tooltip);
-  const Wrapper = withTooltip ? Tooltip.Tooltip : React.Fragment;
-  return /*#__PURE__*/React.createElement(Wrapper, withTooltip ? {
-    content: children.tooltip
-  } : {}, /*#__PURE__*/React.createElement(Button.Button, {
-    size: "xs",
-    leftContent: children.icon,
-    styleVariant: "tertiary",
-    colorVariant: "monochrome-light",
-    onClick: children.onClick
-  }));
+  const Wrapper = withTooltip ? Tooltip.Tooltip : React__namespace.Fragment;
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+    ...(withTooltip ? {
+      content: children.tooltip
+    } : {}),
+    children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+      size: "xs",
+      leftContent: children.icon,
+      styleVariant: "tertiary",
+      colorVariant: "monochrome-light",
+      onClick: children.onClick
+    })
+  });
 }
 function ActionButtonGroup({
   children
@@ -68,14 +94,17 @@ function ActionButtonGroup({
   if (type.isNil(children) || type.isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: KeyValueItem_module.default.ItemAction
-  }, type.isArray(children) ? children.map((action, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  React.createElement(ActionButton, {
-    key: index
-  }, action)) : /*#__PURE__*/React.createElement(ActionButton, null, children));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: KeyValueItem_module.default.ItemAction,
+    children: type.isArray(children) ? children.map((action, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    jsxRuntime.jsx(ActionButton, {
+      children: action
+    }, index)) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+      children: children
+    })
+  });
 }
 const KeyValueItem = /*#__PURE__*/React.forwardRef(function KeyValueListItem({
   className,
@@ -87,21 +116,29 @@ const KeyValueItem = /*#__PURE__*/React.forwardRef(function KeyValueListItem({
   onClickValue,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: index.default(KeyValueItem_module.default.KeyValueItem, KeyValueItem_module.default.singleline, className),
     ref: forwardedRef,
-    "data-testid": KEY_VALUE_ITEM_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.KeyItemWrapper, onClickKey && KeyValueItem_module.default.clickable),
-    onClick: onClickKey
-  }, /*#__PURE__*/React.createElement(KeyItem, {
-    icon: keyIcon
-  }, keyContent)), /*#__PURE__*/React.createElement("div", {
-    className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.ValueItemWrapper, onClickValue && KeyValueItem_module.default.clickable),
-    onClick: onClickValue
-  }, /*#__PURE__*/React.createElement(ValueItem, {
-    truncated: true
-  }, children), /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions)));
+    "data-testid": KEY_VALUE_ITEM_TEST_ID,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.KeyItemWrapper, onClickKey && KeyValueItem_module.default.clickable),
+      onClick: onClickKey,
+      children: /*#__PURE__*/jsxRuntime.jsx(KeyItem, {
+        icon: keyIcon,
+        children: keyContent
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.ValueItemWrapper, onClickValue && KeyValueItem_module.default.clickable),
+      onClick: onClickValue,
+      children: [/*#__PURE__*/jsxRuntime.jsx(ValueItem, {
+        truncated: true,
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionButtonGroup, {
+        children: actions
+      })]
+    })]
+  });
 });
 const KeyValueMultiLineItem = /*#__PURE__*/React.forwardRef(function KeyValueMultiLineListItem({
   children,
@@ -113,19 +150,28 @@ const KeyValueMultiLineItem = /*#__PURE__*/React.forwardRef(function KeyValueMul
   onClickValue,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: index.default(KeyValueItem_module.default.KeyValueItem, KeyValueItem_module.default.multiline, className),
     ref: forwardedRef,
-    "data-testid": KEY_VALUE_ITEM_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.KeyItemWrapper, onClickKey && KeyValueItem_module.default.clickable),
-    onClick: onClickKey
-  }, /*#__PURE__*/React.createElement(KeyItem, {
-    icon: keyIcon
-  }, keyContent), /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions)), /*#__PURE__*/React.createElement("div", {
-    className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.ValueItemWrapper, onClickValue && KeyValueItem_module.default.clickable),
-    onClick: onClickValue
-  }, /*#__PURE__*/React.createElement(ValueItem, null, children)));
+    "data-testid": KEY_VALUE_ITEM_TEST_ID,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.KeyItemWrapper, onClickKey && KeyValueItem_module.default.clickable),
+      onClick: onClickKey,
+      children: [/*#__PURE__*/jsxRuntime.jsx(KeyItem, {
+        icon: keyIcon,
+        children: keyContent
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionButtonGroup, {
+        children: actions
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(KeyValueItem_module.default.ItemWrapper, KeyValueItem_module.default.ValueItemWrapper, onClickValue && KeyValueItem_module.default.clickable),
+      onClick: onClickValue,
+      children: /*#__PURE__*/jsxRuntime.jsx(ValueItem, {
+        children: children
+      })
+    })]
+  });
 });
 
 exports.KEY_VALUE_ITEM_KEY_ICON_TEST_ID = KEY_VALUE_ITEM_KEY_ICON_TEST_ID;