@channel.io/bezier-react 2.0.0-alpha.5 → 2.0.0-alpha.6

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.js

@@ -1,10 +1,14 @@
 'use strict';
 
 var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
+var index$1 = require('../../../node_modules/classnames/index.js');
 var useId = require('../../../hooks/useId.js');
+var Avatar = require('../Avatar/Avatar.js');
 var Avatar_types = require('../Avatar/Avatar.types.js');
-var CheckableAvatar_styled = require('./CheckableAvatar.styled.js');
+var CheckableAvatar_module = require('./CheckableAvatar.module.scss.js');
+var Icon = require('../../Icon/Icon.js');
 var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
 
 /**
@@ -31,6 +35,7 @@ var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
  */
 const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
   children,
+  className,
   id: idProp,
   name,
   size = Avatar_types.AvatarSize.Size24,
@@ -42,7 +47,8 @@ const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
   ...props
 }, forwardedRef) {
   const id = useId.default(idProp, 'bezier-checkable-avatar');
-  return /*#__PURE__*/React.createElement(CheckableAvatar_styled.CheckboxPrimitiveRoot, Object.assign({
+  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+    className: index$1.default(CheckableAvatar_module.default.Checkbox, className),
     ref: forwardedRef,
     id: id,
     name: name,
@@ -50,9 +56,12 @@ const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
   }, props), /*#__PURE__*/React.createElement(index.Indicator, {
     asChild: true,
     forceMount: true
-  }, /*#__PURE__*/React.createElement(CheckableAvatar_styled.CheckIcon, {
-    className: `size-${size}`
-  })), /*#__PURE__*/React.createElement(CheckableAvatar_styled.Avatar, {
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    className: index$1.default(CheckableAvatar_module.default.CheckIcon, CheckableAvatar_module.default[`size-${size}`]),
+    source: bezierIcons.CheckIcon,
+    color: "bgtxt-absolute-white-normal"
+  })), /*#__PURE__*/React.createElement(Avatar.Avatar, {
+    className: CheckableAvatar_module.default.Avatar,
     "aria-hidden": true,
     size: size,
     name: name,

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableAvatar.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\n\nimport { AvatarSize } from '~/src/components/Avatars/Avatar'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport * as Styled from './CheckableAvatar.styled'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({\n  children,\n  id: idProp,\n  name,\n  size = AvatarSize.Size24,\n  disabled,\n  avatarUrl,\n  fallbackUrl,\n  status,\n  showBorder,\n  ...props\n}, forwardedRef) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <Styled.CheckboxPrimitiveRoot\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        forceMount\n      >\n        <Styled.CheckIcon className={`size-${size}`} />\n      </CheckboxPrimitive.Indicator>\n\n      <Styled.Avatar\n        aria-hidden\n        size={size}\n        name={name}\n        disabled={disabled}\n        avatarUrl={avatarUrl}\n        fallbackUrl={fallbackUrl}\n        status={status}\n        showBorder={showBorder}\n      >\n        { children }\n      </Styled.Avatar>\n\n      <VisuallyHidden>\n        <label htmlFor={id}>{ name }</label>\n      </VisuallyHidden>\n    </Styled.CheckboxPrimitiveRoot>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","id","idProp","name","size","AvatarSize","Size24","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","React","createElement","Styled","Object","assign","ref","CheckboxPrimitive","asChild","forceMount","className","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,eAAe,gBAAGC,gBAAU,CAA0C,SAASD,eAAeA,CAAC;EAC1GE,QAAQ;AACRC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;EACJC,IAAI,GAAGC,uBAAU,CAACC,MAAM;EACxBC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMZ,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,yBAAyB,CAAC,CAAA;EAEnD,oBACEa,KAAA,CAAAC,aAAA,CAACC,4CAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAEP,YAAa;AAClBZ,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAAA;GACNK,EAAAA,KAAK,gBAETG,KAAA,CAAAC,aAAA,CAACK,eAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;IACPC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVR,KAAA,CAAAC,aAAA,CAACC,gCAAgB,EAAA;IAACO,SAAS,EAAG,QAAOpB,IAAK,CAAA,CAAA;GAAI,CACnB,CAAC,eAE9BW,KAAA,CAAAC,aAAA,CAACC,6BAAa,EAAA;IACZ,aAAW,EAAA,IAAA;AACXb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAAA;GAEVX,EAAAA,QACW,CAAC,eAEhBe,KAAA,CAAAC,aAAA,CAACS,6BAAc,EAAA,IAAA,eACbV,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOU,IAAAA,OAAO,EAAEzB,EAAAA;GAAME,EAAAA,IAAa,CACrB,CACY,CAAC,CAAA;AAEnC,CAAC;;;;"}
+{"version":3,"file":"CheckableAvatar.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { CheckIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport {\n  Avatar,\n  AvatarSize,\n} from '~/src/components/Avatars/Avatar'\nimport { Icon } from '~/src/components/Icon'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport styles from './CheckableAvatar.module.scss'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({\n  children,\n  className,\n  id: idProp,\n  name,\n  size = AvatarSize.Size24,\n  disabled,\n  avatarUrl,\n  fallbackUrl,\n  status,\n  showBorder,\n  ...props\n}, forwardedRef) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <CheckboxPrimitive.Root\n      className={classNames(\n        styles.Checkbox,\n        className,\n      )}\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        forceMount\n      >\n        <Icon\n          className={classNames(\n            styles.CheckIcon,\n            styles[`size-${size}`],\n          )}\n          source={CheckIcon}\n          color=\"bgtxt-absolute-white-normal\"\n        />\n      </CheckboxPrimitive.Indicator>\n\n      <Avatar\n        className={styles.Avatar}\n        aria-hidden\n        size={size}\n        name={name}\n        disabled={disabled}\n        avatarUrl={avatarUrl}\n        fallbackUrl={fallbackUrl}\n        status={status}\n        showBorder={showBorder}\n      >\n        { children }\n      </Avatar>\n\n      <VisuallyHidden>\n        <label htmlFor={id}>{ name }</label>\n      </VisuallyHidden>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","className","id","idProp","name","size","AvatarSize","Size24","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","React","createElement","CheckboxPrimitive","Object","assign","classNames","styles","Checkbox","ref","asChild","forceMount","Icon","CheckIcon","source","color","Avatar","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;;;;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,eAAe,gBAAGC,gBAAU,CAA0C,SAASD,eAAeA,CAAC;EAC1GE,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;EACJC,IAAI,GAAGC,uBAAU,CAACC,MAAM;EACxBC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMZ,EAAE,GAAGa,aAAK,CAACZ,MAAM,EAAE,yBAAyB,CAAC,CAAA;EAEnD,oBACEa,KAAA,CAAAC,aAAA,CAACC,UAAsB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACrBnB,SAAS,EAAEoB,eAAU,CACnBC,8BAAM,CAACC,QAAQ,EACftB,SACF,CAAE;AACFuB,IAAAA,GAAG,EAAEV,YAAa;AAClBZ,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAAA;GACNK,EAAAA,KAAK,gBAETG,KAAA,CAAAC,aAAA,CAACC,eAA2B,EAAA;IAC1BO,OAAO,EAAA,IAAA;IACPC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVV,KAAA,CAAAC,aAAA,CAACU,SAAI,EAAA;AACH1B,IAAAA,SAAS,EAAEoB,eAAU,CACnBC,8BAAM,CAACM,SAAS,EAChBN,8BAAM,CAAE,CAAA,KAAA,EAAOjB,IAAK,CAAA,CAAC,CACvB,CAAE;AACFwB,IAAAA,MAAM,EAAED,qBAAU;AAClBE,IAAAA,KAAK,EAAC,6BAAA;AAA6B,GACpC,CAC0B,CAAC,eAE9Bd,KAAA,CAAAC,aAAA,CAACc,aAAM,EAAA;IACL9B,SAAS,EAAEqB,8BAAM,CAACS,MAAO;IACzB,aAAW,EAAA,IAAA;AACX1B,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAAA;GAEVZ,EAAAA,QACI,CAAC,eAETgB,KAAA,CAAAC,aAAA,CAACe,6BAAc,EAAA,IAAA,eACbhB,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOgB,IAAAA,OAAO,EAAE/B,EAAAA;GAAME,EAAAA,IAAa,CACrB,CACM,CAAC,CAAA;AAE7B,CAAC;;;;"}

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"CheckIcon":"b-CheckableAvatar-CheckIcon_H-xeq","size-20":"b-CheckableAvatar-size-20_betiF","size-24":"b-CheckableAvatar-size-24_PXIsB","size-30":"b-CheckableAvatar-size-30_lKCIB","size-36":"b-CheckableAvatar-size-36_LVk-9","size-42":"b-CheckableAvatar-size-42_g1CBp","size-48":"b-CheckableAvatar-size-48_x3NWx","size-72":"b-CheckableAvatar-size-72_9QBPL","size-90":"b-CheckableAvatar-size-90_ralQ7","size-120":"b-CheckableAvatar-size-120_hvAfI","Checkbox":"b-CheckableAvatar-Checkbox_SKotk","Avatar":"b-CheckableAvatar-Avatar_8KUIG"};
+
+exports.default = styles;
+//# sourceMappingURL=CheckableAvatar.module.scss.js.map

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckableAvatar.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/Forms/Checkbox/Checkbox.js

@@ -3,11 +3,11 @@
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../../node_modules/@radix-ui/react-checkbox/dist/index.js');
+var index$1 = require('../../../node_modules/classnames/index.js');
 var useId = require('../../../hooks/useId.js');
-var style = require('../../../utils/style.js');
-var FormFieldSize = require('../FormFieldSize.js');
 var useFormFieldProps = require('../useFormFieldProps.js');
-var Checkbox_styled = require('./Checkbox.styled.js');
+var Checkbox_module = require('./Checkbox.module.scss.js');
+var Icon = require('../../Icon/Icon.js');
 var Icon_types = require('../../Icon/Icon.types.js');
 
 /* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */
@@ -16,7 +16,8 @@ const CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(props, forwar
   const state = props['data-state'];
   const isUnchecked = state === 'unchecked';
   const isIndeterminate = state === 'indeterminate';
-  return /*#__PURE__*/React.createElement(Checkbox_styled.CheckIcon, Object.assign({
+  return /*#__PURE__*/React.createElement(Icon.Icon, Object.assign({
+    className: Checkbox_module.default.CheckIcon,
     ref: forwardedRef,
     source: !isIndeterminate ? bezierIcons.CheckBoldIcon : bezierIcons.HyphenBoldIcon,
     size: Icon_types.IconSize.XS,
@@ -25,6 +26,7 @@ const CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(props, forwar
 });
 function CheckboxImpl({
   children,
+  className,
   checked,
   id: idProp,
   ...rest
@@ -35,13 +37,10 @@ function CheckboxImpl({
     ...formFieldProps
   } = useFormFieldProps.default(rest);
   const id = useId.default(idProp ?? formFieldId, 'bezier-checkbox');
-  const containerStyle = {
-    '--b-checkbox-height': children ? style.px(FormFieldSize.default.M) : 'auto'
-  };
-  return /*#__PURE__*/React.createElement(Checkbox_styled.Container, {
-    style: containerStyle,
-    "data-disabled": formFieldProps['aria-disabled']
-  }, /*#__PURE__*/React.createElement(Checkbox_styled.CheckboxPrimitiveRoot, Object.assign({
+  return /*#__PURE__*/React.createElement("div", {
+    className: Checkbox_module.default.Container
+  }, /*#__PURE__*/React.createElement(index.Root, Object.assign({
+    className: index$1.default(Checkbox_module.default.Checkbox, className),
     ref: forwardedRef,
     id: id,
     checked: checked,
@@ -50,7 +49,8 @@ function CheckboxImpl({
     asChild: true
     /* NOTE: To allow the icon to be rendered even if unchecked. */,
     forceMount: true
-  }, /*#__PURE__*/React.createElement(CheckIcon, null))), children && /*#__PURE__*/React.createElement(Checkbox_styled.Label, {
+  }, /*#__PURE__*/React.createElement(CheckIcon, null))), children && /*#__PURE__*/React.createElement("label", {
+    className: Checkbox_module.default.Label,
     htmlFor: id
   }, children));
 }

package/dist/cjs/components/Forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport {\n  CheckBoldIcon,\n  HyphenBoldIcon,\n} from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\nimport { px } from '~/src/utils/style'\n\nimport { FormFieldSize } from '~/src/components/Forms'\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport { IconSize } from '~/src/components/Icon'\n\nimport {\n  type CheckboxProps,\n  type CheckedState,\n} from './Checkbox.types'\n\nimport * as Styled from './Checkbox.styled'\n\ntype CheckIconProps = {} | {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(\n  props,\n  forwardedRef,\n) {\n  // eslint-disable-next-line react/destructuring-assignment\n  const state = props['data-state']\n  const isUnchecked = state === 'unchecked'\n  const isIndeterminate = state === 'indeterminate'\n\n  return (\n    <Styled.CheckIcon\n      ref={forwardedRef}\n      source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n      size={IconSize.XS}\n      color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n      {...props}\n    />\n  )\n})\n\nfunction CheckboxImpl<Checked extends CheckedState>({\n  children,\n  checked,\n  id: idProp,\n  ...rest\n}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n\n  const containerStyle = {\n    '--b-checkbox-height': children ? px(FormFieldSize.M) : 'auto',\n  } as React.CSSProperties\n\n  return (\n    <Styled.Container\n      style={containerStyle}\n      data-disabled={formFieldProps['aria-disabled']}\n    >\n      <Styled.CheckboxPrimitiveRoot\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <CheckboxPrimitive.Indicator\n          asChild\n          /* NOTE: To allow the icon to be rendered even if unchecked. */\n          forceMount\n        >\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n      </Styled.CheckboxPrimitiveRoot>\n      { children && (\n        <Styled.Label htmlFor={id}>\n          { children }\n        </Styled.Label>\n      ) }\n    </Styled.Container>\n  )\n}\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(\n  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Styled","Object","assign","ref","source","CheckBoldIcon","HyphenBoldIcon","size","IconSize","XS","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","containerStyle","px","FormFieldSize","M","style","CheckboxPrimitive","asChild","forceMount","htmlFor","Checkbox"],"mappings":";;;;;;;;;;;;AA4BA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAAgC,SAASD,SAASA,CAC5EE,KAAK,EACLC,YAAY,EACZ;AACA;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,yBAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAET,YAAa;AAClBU,IAAAA,MAAM,EAAE,CAACP,eAAe,GAAGQ,yBAAa,GAAGC,0BAAe;IAC1DC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAEd,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,SAASkB,YAAYA,CAA+B;EAClDC,QAAQ;EACRC,OAAO;AACPC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACmB,CAAC,EAAEtB,YAA0C,EAAE;EACrE,MAAM;AACJoB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;AAE1D,EAAA,MAAMK,cAAc,GAAG;IACrB,qBAAqB,EAAEV,QAAQ,GAAGW,QAAE,CAACC,qBAAa,CAACC,CAAC,CAAC,GAAG,MAAA;GAClC,CAAA;AAExB,EAAA,oBACE3B,KAAA,CAAAC,aAAA,CAACC,yBAAgB,EAAA;AACf0B,IAAAA,KAAK,EAAEJ,cAAe;IACtB,eAAeH,EAAAA,cAAc,CAAC,eAAe,CAAA;GAE7CrB,eAAAA,KAAA,CAAAC,aAAA,CAACC,qCAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAET,YAAa;AAClBoB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;GACvCA,EAAAA,cAAc,gBAElBrB,KAAA,CAAAC,aAAA,CAAC4B,eAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;AACP;IACAC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEV/B,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAA,IAAE,CACe,CACD,CAAC,EAC7BqB,QAAQ,iBACRd,KAAA,CAAAC,aAAA,CAACC,qBAAY,EAAA;AAAC8B,IAAAA,OAAO,EAAEhB,EAAAA;GACnBF,EAAAA,QACU,CAEA,CAAC,CAAA;AAEvB,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACamB,QAAQ,gBAAGvC,gBAAU,CAACmB,YAAY;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport {\n  CheckBoldIcon,\n  HyphenBoldIcon,\n} from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport useFormFieldProps from '~/src/components/Forms/useFormFieldProps'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  type CheckboxProps,\n  type CheckedState,\n} from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ntype CheckIconProps = {} | {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(function CheckIcon(\n  props,\n  forwardedRef,\n) {\n  // eslint-disable-next-line react/destructuring-assignment\n  const state = props['data-state']\n  const isUnchecked = state === 'unchecked'\n  const isIndeterminate = state === 'indeterminate'\n\n  return (\n    <Icon\n      className={styles.CheckIcon}\n      ref={forwardedRef}\n      source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n      size={IconSize.XS}\n      color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n      {...props}\n    />\n  )\n})\n\nfunction CheckboxImpl<Checked extends CheckedState>({\n  children,\n  className,\n  checked,\n  id: idProp,\n  ...rest\n}: CheckboxProps<Checked>, forwardedRef: React.Ref<HTMLButtonElement>) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n\n  return (\n    <div className={styles.Container}>\n      <CheckboxPrimitive.Root\n        className={classNames(\n          styles.Checkbox,\n          className,\n        )}\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <CheckboxPrimitive.Indicator\n          asChild\n          /* NOTE: To allow the icon to be rendered even if unchecked. */\n          forceMount\n        >\n          <CheckIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      { children && (\n        <label\n          className={styles.Label}\n          htmlFor={id}\n        >\n          { children }\n        </label>\n      ) }\n    </div>\n  )\n}\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <Checked extends CheckedState>(\n  props: CheckboxProps<Checked> & { ref?: React.ForwardedRef<HTMLButtonElement> }\n) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Icon","Object","assign","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","IconSize","XS","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","Container","CheckboxPrimitive","classNames","Checkbox","asChild","forceMount","Label","htmlFor"],"mappings":";;;;;;;;;;;;AA8BA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAAgC,SAASD,SAASA,CAC5EE,KAAK,EACLC,YAAY,EACZ;AACA;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACHC,SAAS,EAAEC,uBAAM,CAACb,SAAU;AAC5Bc,IAAAA,GAAG,EAAEX,YAAa;AAClBY,IAAAA,MAAM,EAAE,CAACT,eAAe,GAAGU,yBAAa,GAAGC,0BAAe;IAC1DC,IAAI,EAAEC,mBAAQ,CAACC,EAAG;AAClBC,IAAAA,KAAK,EAAEhB,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,SAASoB,YAAYA,CAA+B;EAClDC,QAAQ;EACRX,SAAS;EACTY,OAAO;AACPC,EAAAA,EAAE,EAAEC,MAAM;EACV,GAAGC,IAAAA;AACmB,CAAC,EAAExB,YAA0C,EAAE;EACrE,MAAM;AACJsB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,yBAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;EAE1D,oBACErB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKI,SAAS,EAAEC,uBAAM,CAACoB,SAAAA;GACrB1B,eAAAA,KAAA,CAAAC,aAAA,CAAC0B,UAAsB,EAAAxB,MAAA,CAAAC,MAAA,CAAA;IACrBC,SAAS,EAAEuB,eAAU,CACnBtB,uBAAM,CAACuB,QAAQ,EACfxB,SACF,CAAE;AACFE,IAAAA,GAAG,EAAEX,YAAa;AAClBsB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;GACvCA,EAAAA,cAAc,gBAElBvB,KAAA,CAAAC,aAAA,CAAC0B,eAA2B,EAAA;IAC1BG,OAAO,EAAA,IAAA;AACP;IACAC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEV/B,KAAA,CAAAC,aAAA,CAACR,SAAS,EAAE,IAAA,CACe,CACP,CAAC,EACvBuB,QAAQ,iBACRhB,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;IACEI,SAAS,EAAEC,uBAAM,CAAC0B,KAAM;AACxBC,IAAAA,OAAO,EAAEf,EAAAA;GAEPF,EAAAA,QACG,CAEN,CAAC,CAAA;AAEV,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaa,QAAQ,gBAAGnC,gBAAU,CAACqB,YAAY;;;;"}

package/dist/cjs/components/Forms/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"CheckIcon":"b-Checkbox-CheckIcon_7e-fb","Checkbox":"b-Checkbox-Checkbox_ccxNB","Container":"b-Checkbox-Container_QThPc","Label":"b-Checkbox-Label_joaYU"};
+
+exports.default = styles;
+//# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/cjs/components/Forms/Checkbox/Checkbox.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/Forms/FormControl/FormControl.js

@@ -1,12 +1,14 @@
 'use strict';
 
 var React = require('react');
+var index = require('../../../node_modules/classnames/index.js');
 var useId = require('../../../hooks/useId.js');
 var props = require('../../../utils/props.js');
 var style = require('../../../utils/style.js');
 var type = require('../../../utils/type.js');
 var FormFieldSize = require('../FormFieldSize.js');
 var FormControlContext = require('./FormControlContext.js');
+var FormControl_module = require('./FormControl.module.scss.js');
 var FormControl_styled = require('./FormControl.styled.js');
 var Stack = require('../../Stack/Stack.js');
 
@@ -70,8 +72,8 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
   const getLabelProps = React.useCallback(ownProps => ({
     id: labelId,
     htmlFor: fieldId,
+    className: index.default(FormControl_module.default.FormLabelWrapper, FormControl_module.default[`position-${labelPosition}`]),
     typo: labelPosition === 'top' ? '13' : '14',
-    Wrapper: labelPosition === 'top' ? FormControl_styled.TopLabelWrapper : FormControl_styled.LeftLabelWrapper,
     ...ownProps
   }), [fieldId, labelId, labelPosition]);
   const getFieldProps = React.useCallback(ownProps => ({
@@ -84,14 +86,14 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl({
     id: helperTextId,
     visible: type.isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,
     ref: setHelperTextNode,
-    Wrapper: labelPosition === 'top' ? FormControl_styled.TopHelperTextWrapper : FormControl_styled.LeftHelperTextWrapper,
+    className: index.default(FormControl_module.default.FormHelperTextWrapper, labelPosition === 'left' && FormControl_module.default['position-left']),
     ...ownProps
   }), [helperTextId, labelPosition, formCommonProps]);
   const getErrorMessageProps = React.useCallback(ownProps => ({
     id: errorMessageId,
     visible: type.isNil(formCommonProps?.hasError) || formCommonProps?.hasError,
     ref: setErrorMessageNode,
-    Wrapper: labelPosition === 'top' ? FormControl_styled.TopHelperTextWrapper : FormControl_styled.LeftHelperTextWrapper,
+    className: index.default(FormControl_module.default.FormHelperTextWrapper, labelPosition === 'left' && FormControl_module.default['position-left']),
     ...ownProps
   }), [errorMessageId, labelPosition, formCommonProps]);
   const contextValue = React.useMemo(() => ({

package/dist/cjs/components/Forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport useId from '~/src/hooks/useId'\nimport { splitByBezierComponentProps } from '~/src/utils/props'\nimport { px } from '~/src/utils/style'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\n// eslint-disable-next-line no-restricted-imports\nimport FormFieldSize from '../FormFieldSize'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\nimport { FormControlContextProvider } from './FormControlContext'\n\nimport * as Styled from './FormControl.styled'\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container({\n  labelPosition,\n  children,\n  testId,\n  ...rest\n}, forwardedRef) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          ref={forwardedRef}\n          direction=\"vertical\"\n          testId={testId}\n          {...rest}\n        >\n          { children }\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <Styled.Grid\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          data-testid={testId}\n          {...rest}\n        >\n          { children }\n        </Styled.Grid>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(function FormControl({\n  id: idProp,\n  testId = FORM_CONTROL_TEST_ID,\n  labelPosition = 'top',\n  leftLabelWrapperHeight = FormFieldSize.M,\n  style,\n  children,\n  ...rest\n}, forwardedRef) {\n  const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n  const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(null)\n  const [errorMessageNode, setErrorMessageNode] = 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) { return errorMessageId }\n    if (helperTextNode) { return helperTextId }\n    return undefined\n  }, [\n    errorMessageNode,\n    helperTextNode,\n    errorMessageId,\n    helperTextId,\n  ])\n\n  const [bezierProps, formCommonProps] = useMemo(() => splitByBezierComponentProps(rest), [rest])\n\n  const getGroupProps = useCallback<GroupPropsGetter>(ownProps => ({\n    id: groupId,\n    'aria-labelledby': labelId,\n    'aria-describedby': describerId,\n    ref: setGroupNode,\n    ...ownProps,\n  }), [\n    groupId,\n    labelId,\n    describerId,\n  ])\n\n  const getLabelProps = useCallback<LabelPropsGetter>(ownProps => ({\n    id: labelId,\n    htmlFor: fieldId,\n    typo: labelPosition === 'top' ? '13' : '14',\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopLabelWrapper\n      : Styled.LeftLabelWrapper,\n    ...ownProps,\n  }), [\n    fieldId,\n    labelId,\n    labelPosition,\n  ])\n\n  const getFieldProps = useCallback<FieldPropsGetter>(ownProps => ({\n    id: fieldId,\n    'aria-describedby': groupNode ? undefined : describerId,\n    ...formCommonProps,\n    ...ownProps,\n  }), [\n    fieldId,\n    describerId,\n    formCommonProps,\n    groupNode,\n  ])\n\n  const getHelperTextProps = useCallback<HelperTextPropsGetter>(ownProps => ({\n    id: helperTextId,\n    visible: isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,\n    ref: setHelperTextNode,\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopHelperTextWrapper\n      : Styled.LeftHelperTextWrapper,\n    ...ownProps,\n  }), [\n    helperTextId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(ownProps => ({\n    id: errorMessageId,\n    visible: isNil(formCommonProps?.hasError) || formCommonProps?.hasError,\n    ref: setErrorMessageNode,\n    Wrapper: labelPosition === 'top'\n      ? Styled.TopHelperTextWrapper\n      : Styled.LeftHelperTextWrapper,\n    ...ownProps,\n  }), [\n    errorMessageId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const contextValue = useMemo(() => ({\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    ...formCommonProps,\n  }), [\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    formCommonProps,\n  ])\n\n  const containerStyle = useMemo(() => ({\n    ...style,\n    '--b-form-control-left-label-wrapper-height': px(leftLabelWrapperHeight),\n  } as React.CSSProperties), [\n    style,\n    leftLabelWrapperHeight,\n  ])\n\n  if (!children) { return null }\n\n  return (\n    <FormControlContextProvider value={contextValue}>\n      <Container\n        {...bezierProps}\n        ref={forwardedRef}\n        style={containerStyle}\n        testId={testId}\n        labelPosition={labelPosition}\n      >\n        { children }\n      </Container>\n    </FormControlContextProvider>\n  )\n})\n"],"names":["FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","testId","rest","forwardedRef","React","createElement","Stack","Object","assign","ref","direction","Styled","FormControl","id","idProp","leftLabelWrapperHeight","FormFieldSize","M","style","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","undefined","describerId","useMemo","bezierProps","formCommonProps","splitByBezierComponentProps","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","typo","Wrapper","getFieldProps","getHelperTextProps","visible","isNil","hasError","getErrorMessageProps","contextValue","containerStyle","px","FormControlContextProvider","value"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { splitByBezierComponentProps } from '~/src/utils/props'\nimport { px } from '~/src/utils/style'\nimport { isNil } from '~/src/utils/type'\n\nimport { Stack } from '~/src/components/Stack'\n\n// eslint-disable-next-line no-restricted-imports\nimport FormFieldSize from '../FormFieldSize'\n\nimport {\n  type ContainerProps,\n  type ErrorMessagePropsGetter,\n  type FieldPropsGetter,\n  type FormControlProps,\n  type GroupPropsGetter,\n  type HelperTextPropsGetter,\n  type LabelPropsGetter,\n} from './FormControl.types'\nimport { FormControlContextProvider } from './FormControlContext'\n\nimport styles from './FormControl.module.scss'\nimport * as Styled from './FormControl.styled'\n\nexport const FORM_CONTROL_TEST_ID = 'bezier-react-form-control'\n\nconst Container = forwardRef<HTMLElement, ContainerProps>(function Container({\n  labelPosition,\n  children,\n  testId,\n  ...rest\n}, forwardedRef) {\n  switch (labelPosition) {\n    case 'top':\n      return (\n        <Stack\n          ref={forwardedRef}\n          direction=\"vertical\"\n          testId={testId}\n          {...rest}\n        >\n          { children }\n        </Stack>\n      )\n\n    case 'left':\n    default:\n      return (\n        <Styled.Grid\n          ref={forwardedRef as React.ForwardedRef<HTMLDivElement>}\n          data-testid={testId}\n          {...rest}\n        >\n          { children }\n        </Styled.Grid>\n      )\n  }\n})\n\nexport const FormControl = forwardRef<HTMLElement, FormControlProps>(function FormControl({\n  id: idProp,\n  testId = FORM_CONTROL_TEST_ID,\n  labelPosition = 'top',\n  leftLabelWrapperHeight = FormFieldSize.M,\n  style,\n  children,\n  ...rest\n}, forwardedRef) {\n  const [groupNode, setGroupNode] = useState<HTMLElement | null>(null)\n  const [helperTextNode, setHelperTextNode] = useState<HTMLElement | null>(null)\n  const [errorMessageNode, setErrorMessageNode] = 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) { return errorMessageId }\n    if (helperTextNode) { return helperTextId }\n    return undefined\n  }, [\n    errorMessageNode,\n    helperTextNode,\n    errorMessageId,\n    helperTextId,\n  ])\n\n  const [bezierProps, formCommonProps] = useMemo(() => splitByBezierComponentProps(rest), [rest])\n\n  const getGroupProps = useCallback<GroupPropsGetter>(ownProps => ({\n    id: groupId,\n    'aria-labelledby': labelId,\n    'aria-describedby': describerId,\n    ref: setGroupNode,\n    ...ownProps,\n  }), [\n    groupId,\n    labelId,\n    describerId,\n  ])\n\n  const getLabelProps = useCallback<LabelPropsGetter>(ownProps => ({\n    id: labelId,\n    htmlFor: fieldId,\n    className: classNames(styles.FormLabelWrapper, styles[`position-${labelPosition}`]),\n    typo: labelPosition === 'top' ? '13' : '14',\n    ...ownProps,\n  }), [\n    fieldId,\n    labelId,\n    labelPosition,\n  ])\n\n  const getFieldProps = useCallback<FieldPropsGetter>(ownProps => ({\n    id: fieldId,\n    'aria-describedby': groupNode ? undefined : describerId,\n    ...formCommonProps,\n    ...ownProps,\n  }), [\n    fieldId,\n    describerId,\n    formCommonProps,\n    groupNode,\n  ])\n\n  const getHelperTextProps = useCallback<HelperTextPropsGetter>(ownProps => ({\n    id: helperTextId,\n    visible: isNil(formCommonProps?.hasError) || !formCommonProps?.hasError,\n    ref: setHelperTextNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    helperTextId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const getErrorMessageProps = useCallback<ErrorMessagePropsGetter>(ownProps => ({\n    id: errorMessageId,\n    visible: isNil(formCommonProps?.hasError) || formCommonProps?.hasError,\n    ref: setErrorMessageNode,\n    className: classNames(styles.FormHelperTextWrapper, labelPosition === 'left' && styles['position-left']),\n    ...ownProps,\n  }), [\n    errorMessageId,\n    labelPosition,\n    formCommonProps,\n  ])\n\n  const contextValue = useMemo(() => ({\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    ...formCommonProps,\n  }), [\n    id,\n    labelId,\n    helperTextId,\n    errorMessageId,\n    getGroupProps,\n    getLabelProps,\n    getFieldProps,\n    getHelperTextProps,\n    getErrorMessageProps,\n    formCommonProps,\n  ])\n\n  const containerStyle = useMemo(() => ({\n    ...style,\n    '--b-form-control-left-label-wrapper-height': px(leftLabelWrapperHeight),\n  } as React.CSSProperties), [\n    style,\n    leftLabelWrapperHeight,\n  ])\n\n  if (!children) { return null }\n\n  return (\n    <FormControlContextProvider value={contextValue}>\n      <Container\n        {...bezierProps}\n        ref={forwardedRef}\n        style={containerStyle}\n        testId={testId}\n        labelPosition={labelPosition}\n      >\n        { children }\n      </Container>\n    </FormControlContextProvider>\n  )\n})\n"],"names":["FORM_CONTROL_TEST_ID","Container","forwardRef","labelPosition","children","testId","rest","forwardedRef","React","createElement","Stack","Object","assign","ref","direction","Styled","FormControl","id","idProp","leftLabelWrapperHeight","FormFieldSize","M","style","groupNode","setGroupNode","useState","helperTextNode","setHelperTextNode","errorMessageNode","setErrorMessageNode","useId","groupId","labelId","helperTextId","errorMessageId","fieldId","undefined","describerId","useMemo","bezierProps","formCommonProps","splitByBezierComponentProps","getGroupProps","useCallback","ownProps","getLabelProps","htmlFor","className","classNames","styles","FormLabelWrapper","typo","getFieldProps","getHelperTextProps","visible","isNil","hasError","FormHelperTextWrapper","getErrorMessageProps","contextValue","containerStyle","px","FormControlContextProvider","value"],"mappings":"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"}

package/dist/cjs/components/Forms/FormControl/FormControl.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"FormLabelWrapper":"b-FormControl-FormLabelWrapper_33fCI","position-top":"b-FormControl-position-top_fdnSp","position-left":"b-FormControl-position-left_txvFi","FormHelperTextWrapper":"b-FormControl-FormHelperTextWrapper_xt5ic"};
+
+exports.default = styles;
+//# sourceMappingURL=FormControl.module.scss.js.map

package/dist/cjs/components/Forms/FormControl/FormControl.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/cjs/components/Forms/FormControl/FormControl.styled.js

@@ -9,30 +9,10 @@ const Box = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
 })(["position:relative;", ""], ({
   interpolation
 }) => interpolation);
-const TopLabelWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
-  displayName: "FormControlstyled__TopLabelWrapper",
-  componentId: "sc-1ae9o3x-1"
-})(["padding:0 2px;margin-bottom:4px;"]);
-const TopHelperTextWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
-  displayName: "FormControlstyled__TopHelperTextWrapper",
-  componentId: "sc-1ae9o3x-2"
-})(["padding:0 2px;margin-top:4px;"]);
 const Grid = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
   displayName: "FormControlstyled__Grid",
-  componentId: "sc-1ae9o3x-3"
+  componentId: "sc-1ae9o3x-1"
 })(["display:grid;grid-template-rows:repeat(2,auto);grid-template-columns:", "px 1fr;grid-column-gap:12px;align-items:center;"], LEFT_LABEL_MIN_WIDTH);
-const LeftLabelWrapper = /*#__PURE__*/FoundationStyledComponent.styled(Box).withConfig({
-  displayName: "FormControlstyled__LeftLabelWrapper",
-  componentId: "sc-1ae9o3x-4"
-})(["display:flex;grid-row:1 / 1;grid-column:1 / 1;align-items:center;align-self:start;height:var(--b-form-control-left-label-wrapper-height);"]);
-const LeftHelperTextWrapper = /*#__PURE__*/FoundationStyledComponent.styled(TopHelperTextWrapper).withConfig({
-  displayName: "FormControlstyled__LeftHelperTextWrapper",
-  componentId: "sc-1ae9o3x-5"
-})(["grid-row:2 / 2;grid-column:2;"]);
 
 exports.Grid = Grid;
-exports.LeftHelperTextWrapper = LeftHelperTextWrapper;
-exports.LeftLabelWrapper = LeftLabelWrapper;
-exports.TopHelperTextWrapper = TopHelperTextWrapper;
-exports.TopLabelWrapper = TopLabelWrapper;
 //# sourceMappingURL=FormControl.styled.js.map

package/dist/cjs/components/Forms/FormControl/FormControl.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.styled.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nconst LEFT_LABEL_MIN_WIDTH = 150\n\nconst Box = styled.div<InterpolationProps>`\n  position: relative;\n  ${({ interpolation }) => interpolation}\n`\n\nexport const TopLabelWrapper = styled(Box)`\n  padding: 0 2px;\n  margin-bottom: 4px;\n`\n\nexport const TopHelperTextWrapper = styled(Box)`\n  padding: 0 2px;\n  margin-top: 4px;\n`\n\nexport const Grid = styled(Box)`\n  display: grid;\n  grid-template-rows: repeat(2, auto);\n  grid-template-columns: ${LEFT_LABEL_MIN_WIDTH}px 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n`\n\nexport const LeftLabelWrapper = styled(Box)`\n  display: flex;\n  grid-row: 1 / 1;\n  grid-column: 1 / 1;\n  align-items: center;\n  align-self: start;\n  height: var(--b-form-control-left-label-wrapper-height);\n`\n\nexport const LeftHelperTextWrapper = styled(TopHelperTextWrapper)`\n  grid-row: 2 / 2;\n  grid-column: 2;\n`\n"],"names":["LEFT_LABEL_MIN_WIDTH","Box","styled","div","withConfig","displayName","componentId","interpolation","TopLabelWrapper","TopHelperTextWrapper","Grid","LeftLabelWrapper","LeftHelperTextWrapper"],"mappings":";;;;AAIA,MAAMA,oBAAoB,GAAG,GAAG,CAAA;AAEhC,MAAMC,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,EAAA,CAAA,EAElB,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAEM,MAAMC,eAAe,gBAAGN,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGzC,CAAA,CAAA,CAAA,kCAAA,CAAA,EAAA;AAEM,MAAMG,oBAAoB,gBAAGP,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,yCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAG9C,CAAA,CAAA,CAAA,+BAAA,CAAA,EAAA;AAEM,MAAMI,IAAI,gBAAGR,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,iDAAA,CAAA,EAGJN,oBAAoB,EAG9C;AAEM,MAAMW,gBAAgB,gBAAGT,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAO1C,CAAA,CAAA,CAAA,2IAAA,CAAA,EAAA;AAEM,MAAMM,qBAAqB,gBAAGV,gCAAM,CAACO,oBAAoB,CAAC,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,0CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAGhE,CAAA,CAAA,CAAA,+BAAA,CAAA;;;;;;;;"}
+{"version":3,"file":"FormControl.styled.js","sources":["../../../../../src/components/Forms/FormControl/FormControl.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nconst LEFT_LABEL_MIN_WIDTH = 150\n\nconst Box = styled.div<InterpolationProps>`\n  position: relative;\n  ${({ interpolation }) => interpolation}\n`\n\nexport const Grid = styled(Box)`\n  display: grid;\n  grid-template-rows: repeat(2, auto);\n  grid-template-columns: ${LEFT_LABEL_MIN_WIDTH}px 1fr;\n  grid-column-gap: 12px;\n  align-items: center;\n`\n"],"names":["LEFT_LABEL_MIN_WIDTH","Box","styled","div","withConfig","displayName","componentId","interpolation","Grid"],"mappings":";;;;AAIA,MAAMA,oBAAoB,GAAG,GAAG,CAAA;AAEhC,MAAMC,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,EAAA,CAAA,EAElB,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,CACvC,CAAA;AAEM,MAAMC,IAAI,gBAAGN,gCAAM,CAACD,GAAG,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uEAAA,EAAA,iDAAA,CAAA,EAGJN,oBAAoB;;;;"}

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

@@ -1,68 +1,113 @@
 'use strict';
 
 var React = require('react');
+var index = require('../../../node_modules/classnames/index.js');
 var useMergeRefs = require('../../../hooks/useMergeRefs.js');
 var _function = require('../../../utils/function.js');
 var type = require('../../../utils/type.js');
-var FormHelperText_styled = require('./FormHelperText.styled.js');
+var FormHelperText_module = require('./FormHelperText.module.scss.js');
 var FormControlContext = require('../FormControl/FormControlContext.js');
+var Text = require('../../Text/Text.js');
 
 const FORM_HELPER_TEXT_TEST_ID = 'bezier-react-form-helper-text';
 const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-react-form-error-message';
-const BaseHelperText = /*#__PURE__*/React.forwardRef(({
-  as = 'p',
-  type: type$1,
-  typo = '13',
-  children,
-  ...rest
-}, forwardedRef) => {
+const BaseHelperText = /*#__PURE__*/React.forwardRef(function BaseHelperText(props, forwardedRef) {
+  const {
+    type: type$1,
+    typo = '13',
+    children,
+    ...rest
+  } = props;
   const contextValue = FormControlContext.useFormControlContext();
   const getProps = type$1 === 'info' ? contextValue?.getHelperTextProps : contextValue?.getErrorMessageProps;
   const {
     visible,
     ref,
-    Wrapper,
+    className: formControlClassName,
     ...ownProps
   } = getProps?.(rest) ?? {
     visible: true,
     ref: _function.noop,
-    Wrapper: React.Fragment,
+    classNameFromControl: undefined,
     ...rest
   };
   const mergedRef = useMergeRefs.default(ref, forwardedRef);
-  const shouldRendered = React.useMemo(() => !type.isEmpty(children) && visible, [visible, children]);
-  if (!shouldRendered) {
+  if (type.isEmpty(children) || !visible) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FormHelperText_styled.HelperText, Object.assign({}, ownProps, {
+  return /*#__PURE__*/React.createElement(Text.Text, Object.assign({
     ref: mergedRef,
-    forwardedAs: as,
-    typo: typo
-  }), children));
+    as: "p",
+    className: index.default(FormHelperText_module.default.FormHelperText, formControlClassName),
+    typo: typo,
+    align: "left"
+  }, ownProps), children);
+});
+
+/**
+ * `FormHelperText` is a component to show the description of the input element.
+ * `FormControl` component can handle its layout by `position` props.
+ *
+ * @example
+ * ```tsx
+ * <FormControl position="top">
+ *   <FormLabel>
+ *     Password
+ *   </FormLabel>
+ *   <TextField />
+ *   <FormHelperText>
+ *     Please use at least 6 characters
+ *   </FormHelperText>
+ * </FormControl>
+ * ```
+ */
+const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(props, forwardedRef) {
+  const {
+    testId = FORM_HELPER_TEXT_TEST_ID,
+    color = 'txt-black-dark',
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
+    type: "info",
+    ref: forwardedRef,
+    testId: testId,
+    color: color
+  }), children);
+});
+
+/**
+ * `FormErrorMessage` is a component to show error message when form values are invalid.
+ * It should be used with `FormControl` component.
+ *
+ * @example
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>
+ *     Password
+ *   </FormLabel>
+ *   <TextField />
+ *   <FormErrorMessage>
+ *     Password should be at least 6 characters
+ *   </FormErrorMessage>
+ * </FormControl>
+ * ```
+ */
+const FormErrorMessage = /*#__PURE__*/React.forwardRef(function FormErrorMessage(props, forwardedRef) {
+  const {
+    testId = FORM_ERROR_MESSAGE_TEST_ID,
+    color = 'bgtxt-orange-normal',
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
+    "aria-live": "polite",
+    type: "error",
+    ref: forwardedRef,
+    testId: testId,
+    color: color
+  }), children);
 });
-const FormHelperText = /*#__PURE__*/React.forwardRef(({
-  testId = FORM_HELPER_TEXT_TEST_ID,
-  color = 'txt-black-dark',
-  children,
-  ...rest
-}, forwardedRef) => /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
-  type: "info",
-  ref: forwardedRef,
-  testId: testId,
-  color: color
-}), children));
-const FormErrorMessage = /*#__PURE__*/React.forwardRef(({
-  testId = FORM_ERROR_MESSAGE_TEST_ID,
-  color = 'bgtxt-orange-normal',
-  children,
-  ...rest
-}, forwardedRef) => /*#__PURE__*/React.createElement(BaseHelperText, Object.assign({}, rest, {
-  "aria-live": "polite",
-  type: "error",
-  ref: forwardedRef,
-  testId: testId,
-  color: color
-}), children));
 
 exports.FORM_ERROR_MESSAGE_TEST_ID = FORM_ERROR_MESSAGE_TEST_ID;
 exports.FORM_HELPER_TEXT_TEST_ID = FORM_HELPER_TEXT_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/Forms/FormHelperText/FormHelperText.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\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/Forms/FormControl'\n\nimport type {\n  BaseHelperTextProps,\n  FormErrorMessageProps,\n  FormHelperTextProps,\n} from './FormHelperText.types'\n\nimport * as Styled from './FormHelperText.styled'\n\ntype ForwardedRef = React.Ref<HTMLParamElement>\n\nexport const FORM_HELPER_TEXT_TEST_ID = 'bezier-react-form-helper-text'\nexport const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-react-form-error-message'\n\nconst BaseHelperText = forwardRef(({\n  as = 'p',\n  type,\n  typo = '13',\n  children,\n  ...rest\n}: BaseHelperTextProps,\nforwardedRef: ForwardedRef,\n) => {\n  const contextValue = useFormControlContext()\n  const getProps = type === 'info'\n    ? contextValue?.getHelperTextProps\n    : contextValue?.getErrorMessageProps\n\n  const {\n    visible,\n    ref,\n    Wrapper,\n    ...ownProps\n  } = getProps?.(rest) ?? {\n    visible: true,\n    ref: noop,\n    Wrapper: React.Fragment,\n    ...rest,\n  }\n\n  const mergedRef = useMergeRefs(ref, forwardedRef)\n\n  const shouldRendered = useMemo(() => (\n    !isEmpty(children) && visible\n  ), [\n    visible,\n    children,\n  ])\n\n  if (!shouldRendered) { return null }\n\n  return (\n    <Wrapper>\n      <Styled.HelperText\n        {...ownProps}\n        ref={mergedRef}\n        forwardedAs={as}\n        typo={typo}\n      >\n        { children }\n      </Styled.HelperText>\n    </Wrapper>\n  )\n})\n\nexport const FormHelperText = forwardRef(({\n  testId = FORM_HELPER_TEXT_TEST_ID,\n  color = 'txt-black-dark',\n  children,\n  ...rest\n}: FormHelperTextProps,\nforwardedRef: ForwardedRef,\n) => (\n  <BaseHelperText\n    {...rest}\n    type=\"info\"\n    ref={forwardedRef}\n    testId={testId}\n    color={color}\n  >\n    { children }\n  </BaseHelperText>\n))\n\nexport const FormErrorMessage = forwardRef(({\n  testId = FORM_ERROR_MESSAGE_TEST_ID,\n  color = 'bgtxt-orange-normal',\n  children,\n  ...rest\n}: FormErrorMessageProps,\nforwardedRef: ForwardedRef,\n) => (\n  <BaseHelperText\n    {...rest}\n    aria-live=\"polite\"\n    type=\"error\"\n    ref={forwardedRef}\n    testId={testId}\n    color={color}\n  >\n    { children }\n  </BaseHelperText>\n))\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","as","type","typo","children","rest","forwardedRef","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","Wrapper","ownProps","noop","React","Fragment","mergedRef","useMergeRefs","shouldRendered","useMemo","isEmpty","createElement","Styled","Object","assign","forwardedAs","FormHelperText","testId","color","FormErrorMessage"],"mappings":";;;;;;;;;AAqBO,MAAMA,wBAAwB,GAAG,gCAA+B;AAChE,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,cAAc,gBAAGC,gBAAU,CAAC,CAAC;AACjCC,EAAAA,EAAE,GAAG,GAAG;QACRC,MAAI;AACJC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;EACR,GAAGC,IAAAA;AACgB,CAAC,EACtBC,YAA0B,KACrB;AACH,EAAA,MAAMC,YAAY,GAAGC,wCAAqB,EAAE,CAAA;AAC5C,EAAA,MAAMC,QAAQ,GAAGP,MAAI,KAAK,MAAM,GAC5BK,YAAY,EAAEG,kBAAkB,GAChCH,YAAY,EAAEI,oBAAoB,CAAA;EAEtC,MAAM;IACJC,OAAO;IACPC,GAAG;IACHC,OAAO;IACP,GAAGC,QAAAA;AACL,GAAC,GAAGN,QAAQ,GAAGJ,IAAI,CAAC,IAAI;AACtBO,IAAAA,OAAO,EAAE,IAAI;AACbC,IAAAA,GAAG,EAAEG,cAAI;IACTF,OAAO,EAAEG,KAAK,CAACC,QAAQ;IACvB,GAAGb,IAAAA;GACJ,CAAA;AAED,EAAA,MAAMc,SAAS,GAAGC,oBAAY,CAACP,GAAG,EAAEP,YAAY,CAAC,CAAA;AAEjD,EAAA,MAAMe,cAAc,GAAGC,aAAO,CAAC,MAC7B,CAACC,YAAO,CAACnB,QAAQ,CAAC,IAAIQ,OACvB,EAAE,CACDA,OAAO,EACPR,QAAQ,CACT,CAAC,CAAA;EAEF,IAAI,CAACiB,cAAc,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAEnC,EAAA,oBACEJ,KAAA,CAAAO,aAAA,CAACV,OAAO,EAAA,IAAA,eACNG,KAAA,CAAAO,aAAA,CAACC,gCAAiB,EAAAC,MAAA,CAAAC,MAAA,KACZZ,QAAQ,EAAA;AACZF,IAAAA,GAAG,EAAEM,SAAU;AACfS,IAAAA,WAAW,EAAE3B,EAAG;AAChBE,IAAAA,IAAI,EAAEA,IAAAA;GAEJC,CAAAA,EAAAA,QACe,CACZ,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEWyB,MAAAA,cAAc,gBAAG7B,gBAAU,CAAC,CAAC;AACxC8B,EAAAA,MAAM,GAAGjC,wBAAwB;AACjCkC,EAAAA,KAAK,GAAG,gBAAgB;EACxB3B,QAAQ;EACR,GAAGC,IAAAA;AACgB,CAAC,EACtBC,YAA0B,kBAExBW,KAAA,CAAAO,aAAA,CAACzB,cAAc,EAAA2B,MAAA,CAAAC,MAAA,KACTtB,IAAI,EAAA;AACRH,EAAAA,IAAI,EAAC,MAAM;AACXW,EAAAA,GAAG,EAAEP,YAAa;AAClBwB,EAAAA,MAAM,EAAEA,MAAO;AACfC,EAAAA,KAAK,EAAEA,KAAAA;AAAM,CAEX3B,CAAAA,EAAAA,QACY,CACjB,EAAC;AAEW4B,MAAAA,gBAAgB,gBAAGhC,gBAAU,CAAC,CAAC;AAC1C8B,EAAAA,MAAM,GAAGhC,0BAA0B;AACnCiC,EAAAA,KAAK,GAAG,qBAAqB;EAC7B3B,QAAQ;EACR,GAAGC,IAAAA;AACkB,CAAC,EACxBC,YAA0B,kBAExBW,KAAA,CAAAO,aAAA,CAACzB,cAAc,EAAA2B,MAAA,CAAAC,MAAA,KACTtB,IAAI,EAAA;AACR,EAAA,WAAA,EAAU,QAAQ;AAClBH,EAAAA,IAAI,EAAC,OAAO;AACZW,EAAAA,GAAG,EAAEP,YAAa;AAClBwB,EAAAA,MAAM,EAAEA,MAAO;AACfC,EAAAA,KAAK,EAAEA,KAAAA;AAAM,CAEX3B,CAAAA,EAAAA,QACY,CACjB;;;;;;;"}
+{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/Forms/FormHelperText/FormHelperText.tsx"],"sourcesContent":["import 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/Forms/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-react-form-helper-text'\nexport const FORM_ERROR_MESSAGE_TEST_ID = 'bezier-react-form-error-message'\n\nconst BaseHelperText = forwardRef<HTMLSpanElement, BaseHelperTextProps>(function BaseHelperText(props, forwardedRef) {\n  const {\n    type,\n    typo = '13',\n    children,\n    ...rest\n  } = props\n\n  const contextValue = useFormControlContext()\n  const getProps = 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    classNameFromControl: undefined,\n    ...rest,\n  }\n\n  const mergedRef = useMergeRefs(ref, forwardedRef)\n\n  if (isEmpty(children) || !visible) { return null }\n\n  return (\n    <Text\n      ref={mergedRef}\n      as=\"p\"\n      className={classNames(\n        styles.FormHelperText,\n        formControlClassName,\n      )}\n      typo={typo}\n      align=\"left\"\n      {...ownProps}\n    >\n      { children }\n    </Text>\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 *\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>(function FormHelperText(props, forwardedRef) {\n  const {\n    testId = FORM_HELPER_TEXT_TEST_ID,\n    color = 'txt-black-dark',\n    children,\n    ...rest\n  } = props\n\n  return (\n    <BaseHelperText\n      {...rest}\n      type=\"info\"\n      ref={forwardedRef}\n      testId={testId}\n      color={color}\n    >\n      { children }\n    </BaseHelperText>\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 *\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<HTMLSpanElement, FormErrorMessageProps>(function FormErrorMessage(props, forwardedRef) {\n  const {\n    testId = FORM_ERROR_MESSAGE_TEST_ID,\n    color = 'bgtxt-orange-normal',\n    children,\n    ...rest\n  } = props\n\n  return (\n    <BaseHelperText\n      {...rest}\n      aria-live=\"polite\"\n      type=\"error\"\n      ref={forwardedRef}\n      testId={testId}\n      color={color}\n    >\n      { children }\n    </BaseHelperText>\n  )\n})\n"],"names":["FORM_HELPER_TEXT_TEST_ID","FORM_ERROR_MESSAGE_TEST_ID","BaseHelperText","forwardRef","props","forwardedRef","type","typo","children","rest","contextValue","useFormControlContext","getProps","getHelperTextProps","getErrorMessageProps","visible","ref","className","formControlClassName","ownProps","noop","classNameFromControl","undefined","mergedRef","useMergeRefs","isEmpty","React","createElement","Text","Object","assign","as","classNames","styles","FormHelperText","align","testId","color","FormErrorMessage"],"mappings":"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"}

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"FormHelperText":"b-FormHelperText-FormHelperText_e-6LL"};
+
+exports.default = styles;
+//# sourceMappingURL=FormHelperText.module.scss.js.map

package/dist/cjs/components/Forms/FormHelperText/FormHelperText.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}