@channel.io/bezier-react 3.1.5 → 3.2.0

package/dist/cjs/components/Select/Select.js

@@ -10,8 +10,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var FormControl = require('../FormControl/FormControl.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
 var Icon = require('../Icon/Icon.js');
-var Text = require('../Text/Text.js');
 var Overlay = require('../Overlay/Overlay.js');
+var Text = require('../Text/Text.js');
 
 const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown';
 const Select = /*#__PURE__*/React.forwardRef(function Select({
@@ -74,6 +74,27 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
   }, [defaultFocus, disabled, readOnly]);
   React.useImperativeHandle(forwardedRef, () => handle);
   const hasContent = !type.isEmpty(text);
+  const Content = (() => {
+    if (!hasContent) {
+      return /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        "data-testid": "bezier-select-trigger-text",
+        typo: "14",
+        truncated: true,
+        color: "txt-black-dark",
+        children: placeholder
+      });
+    }
+    if (typeof text === 'string') {
+      return /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        "data-testid": "bezier-select-trigger-text",
+        typo: "14",
+        truncated: true,
+        color: textColor,
+        children: text
+      });
+    }
+    return text;
+  })();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: style,
     className: index.default(Select_module.default.SelectContainer, className),
@@ -91,13 +112,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select({
           size: "xs",
           marginRight: 6,
           color: iconColor
-        }) : leftContent, /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
-          "data-testid": "bezier-select-trigger-text",
-          typo: "14",
-          truncated: true,
-          color: hasContent ? textColor : 'txt-black-dark',
-          children: hasContent ? text : placeholder
-        }), bezierIcons.isBezierIcon(rightContent) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        }) : leftContent, Content, bezierIcons.isBezierIcon(rightContent) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           source: rightContent,
           size: "xs",
           marginRight: 6,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Overlay } from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport { type SelectProps, type SelectRef } from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select(\n  {\n    children,\n    style,\n    className,\n    size: sizeProps,\n    defaultFocus = false,\n    placeholder = '',\n    leftContent,\n    rightContent,\n    iconColor = 'txt-black-dark',\n    text,\n    textColor = 'txt-black-darkest',\n    withoutChevron = false,\n    dropdownStyle,\n    dropdownClassName,\n    dropdownContainer,\n    dropdownMarginX,\n    dropdownMarginY = 6,\n    dropdownZIndex = 'overlay',\n    dropdownPosition = 'bottom-left',\n    dropdownKeepInContainer = false,\n    onClickTrigger,\n    onHideDropdown,\n    ...rest\n  },\n  forwardedRef\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const size = sizeProps ?? formFieldSize ?? 'm'\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback(\n    (event: React.MouseEvent) => {\n      if (!disabled && !readOnly) {\n        setIsDropdownOpened((prevState) => !prevState)\n        onClickTrigger?.(event)\n      }\n    },\n    [disabled, readOnly, onClickTrigger]\n  )\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo(\n    (): SelectRef => ({\n      handleClickTrigger,\n      handleHideDropdown,\n      getDOMNode,\n    }),\n    [handleClickTrigger, handleHideDropdown, getDOMNode]\n  )\n\n  useEffect(\n    function handleDefaultFocus() {\n      if (defaultFocus && !disabled && !readOnly) {\n        setIsDropdownOpened(true)\n      }\n    },\n    [defaultFocus, disabled, readOnly]\n  )\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  return (\n    <div\n      style={style}\n      className={classNames(styles.SelectContainer, className)}\n      ref={containerRef}\n    >\n      <BaseButton\n        className={classNames(\n          styles.SelectTrigger,\n          getFormFieldSizeClassName(size),\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active\n        )}\n        ref={triggerRef}\n        disabled={disabled}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          {isBezierIcon(leftContent) ? (\n            <Icon\n              source={leftContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            leftContent\n          )}\n\n          <Text\n            data-testid=\"bezier-select-trigger-text\"\n            typo=\"14\"\n            truncated\n            color={hasContent ? textColor : 'txt-black-dark'}\n          >\n            {hasContent ? text : placeholder}\n          </Text>\n\n          {isBezierIcon(rightContent) ? (\n            <Icon\n              source={rightContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            rightContent\n          )}\n        </div>\n\n        {!withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size=\"xs\"\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        )}\n      </BaseButton>\n\n      <Overlay\n        zIndex={dropdownZIndex}\n        style={dropdownStyle}\n        className={classNames(styles.SelectDropdown, dropdownClassName)}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        keepInContainer={dropdownKeepInContainer}\n        data-testid={SELECT_DROPDOWN_TEST_ID}\n        onHide={handleHideDropdown}\n      >\n        {children}\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","sizeProps","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","dropdownKeepInContainer","onClickTrigger","onHideDropdown","rest","forwardedRef","_ref","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","_jsxs","classNames","styles","SelectContainer","ref","BaseButton","SelectTrigger","getFormFieldSizeClassName","invalid","readonly","active","onClick","SelectMainContent","isBezierIcon","_jsx","Icon","source","marginRight","color","Text","typo","truncated","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","zIndex","SelectDropdown","withTransition","show","marginX","marginY","target","container","position","keepInContainer","onHide"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Overlay } from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport { type SelectProps, type SelectRef } from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select(\n  {\n    children,\n    style,\n    className,\n    size: sizeProps,\n    defaultFocus = false,\n    placeholder = '',\n    leftContent,\n    rightContent,\n    iconColor = 'txt-black-dark',\n    text,\n    textColor = 'txt-black-darkest',\n    withoutChevron = false,\n    dropdownStyle,\n    dropdownClassName,\n    dropdownContainer,\n    dropdownMarginX,\n    dropdownMarginY = 6,\n    dropdownZIndex = 'overlay',\n    dropdownPosition = 'bottom-left',\n    dropdownKeepInContainer = false,\n    onClickTrigger,\n    onHideDropdown,\n    ...rest\n  },\n  forwardedRef\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const size = sizeProps ?? formFieldSize ?? 'm'\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback(\n    (event: React.MouseEvent) => {\n      if (!disabled && !readOnly) {\n        setIsDropdownOpened((prevState) => !prevState)\n        onClickTrigger?.(event)\n      }\n    },\n    [disabled, readOnly, onClickTrigger]\n  )\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo(\n    (): SelectRef => ({\n      handleClickTrigger,\n      handleHideDropdown,\n      getDOMNode,\n    }),\n    [handleClickTrigger, handleHideDropdown, getDOMNode]\n  )\n\n  useEffect(\n    function handleDefaultFocus() {\n      if (defaultFocus && !disabled && !readOnly) {\n        setIsDropdownOpened(true)\n      }\n    },\n    [defaultFocus, disabled, readOnly]\n  )\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  const Content = (() => {\n    if (!hasContent) {\n      return (\n        <Text\n          data-testid=\"bezier-select-trigger-text\"\n          typo=\"14\"\n          truncated\n          color=\"txt-black-dark\"\n        >\n          {placeholder}\n        </Text>\n      )\n    }\n\n    if (typeof text === 'string') {\n      return (\n        <Text\n          data-testid=\"bezier-select-trigger-text\"\n          typo=\"14\"\n          truncated\n          color={textColor}\n        >\n          {text}\n        </Text>\n      )\n    }\n\n    return text\n  })()\n\n  return (\n    <div\n      style={style}\n      className={classNames(styles.SelectContainer, className)}\n      ref={containerRef}\n    >\n      <BaseButton\n        className={classNames(\n          styles.SelectTrigger,\n          getFormFieldSizeClassName(size),\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active\n        )}\n        ref={triggerRef}\n        disabled={disabled}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          {isBezierIcon(leftContent) ? (\n            <Icon\n              source={leftContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            leftContent\n          )}\n\n          {Content}\n\n          {isBezierIcon(rightContent) ? (\n            <Icon\n              source={rightContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            rightContent\n          )}\n        </div>\n\n        {!withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size=\"xs\"\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        )}\n      </BaseButton>\n\n      <Overlay\n        zIndex={dropdownZIndex}\n        style={dropdownStyle}\n        className={classNames(styles.SelectDropdown, dropdownClassName)}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        keepInContainer={dropdownKeepInContainer}\n        data-testid={SELECT_DROPDOWN_TEST_ID}\n        onHide={handleHideDropdown}\n      >\n        {children}\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","sizeProps","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","dropdownKeepInContainer","onClickTrigger","onHideDropdown","rest","forwardedRef","_ref","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","Content","_jsx","Text","typo","truncated","color","_jsxs","classNames","styles","SelectContainer","ref","BaseButton","SelectTrigger","getFormFieldSizeClassName","invalid","readonly","active","onClick","SelectMainContent","isBezierIcon","Icon","source","marginRight","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","zIndex","SelectDropdown","withTransition","show","marginX","marginY","target","container","position","keepInContainer","onHide"],"mappings":"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"}

package/dist/esm/components/Select/Select.mjs

@@ -8,8 +8,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useFormFieldProps } from '../FormControl/FormControl.mjs';
 import { BaseButton } from '../BaseButton/BaseButton.mjs';
 import { Icon } from '../Icon/Icon.mjs';
-import { Text } from '../Text/Text.mjs';
 import { Overlay } from '../Overlay/Overlay.mjs';
+import { Text } from '../Text/Text.mjs';
 
 const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown';
 const Select = /*#__PURE__*/forwardRef(function Select({
@@ -72,6 +72,27 @@ const Select = /*#__PURE__*/forwardRef(function Select({
   }, [defaultFocus, disabled, readOnly]);
   useImperativeHandle(forwardedRef, () => handle);
   const hasContent = !isEmpty(text);
+  const Content = (() => {
+    if (!hasContent) {
+      return /*#__PURE__*/jsx(Text, {
+        "data-testid": "bezier-select-trigger-text",
+        typo: "14",
+        truncated: true,
+        color: "txt-black-dark",
+        children: placeholder
+      });
+    }
+    if (typeof text === 'string') {
+      return /*#__PURE__*/jsx(Text, {
+        "data-testid": "bezier-select-trigger-text",
+        typo: "14",
+        truncated: true,
+        color: textColor,
+        children: text
+      });
+    }
+    return text;
+  })();
   return /*#__PURE__*/jsxs("div", {
     style: style,
     className: classNames(styles.SelectContainer, className),
@@ -89,13 +110,7 @@ const Select = /*#__PURE__*/forwardRef(function Select({
           size: "xs",
           marginRight: 6,
           color: iconColor
-        }) : leftContent, /*#__PURE__*/jsx(Text, {
-          "data-testid": "bezier-select-trigger-text",
-          typo: "14",
-          truncated: true,
-          color: hasContent ? textColor : 'txt-black-dark',
-          children: hasContent ? text : placeholder
-        }), isBezierIcon(rightContent) ? /*#__PURE__*/jsx(Icon, {
+        }) : leftContent, Content, isBezierIcon(rightContent) ? /*#__PURE__*/jsx(Icon, {
           source: rightContent,
           size: "xs",
           marginRight: 6,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Overlay } from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport { type SelectProps, type SelectRef } from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select(\n  {\n    children,\n    style,\n    className,\n    size: sizeProps,\n    defaultFocus = false,\n    placeholder = '',\n    leftContent,\n    rightContent,\n    iconColor = 'txt-black-dark',\n    text,\n    textColor = 'txt-black-darkest',\n    withoutChevron = false,\n    dropdownStyle,\n    dropdownClassName,\n    dropdownContainer,\n    dropdownMarginX,\n    dropdownMarginY = 6,\n    dropdownZIndex = 'overlay',\n    dropdownPosition = 'bottom-left',\n    dropdownKeepInContainer = false,\n    onClickTrigger,\n    onHideDropdown,\n    ...rest\n  },\n  forwardedRef\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const size = sizeProps ?? formFieldSize ?? 'm'\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback(\n    (event: React.MouseEvent) => {\n      if (!disabled && !readOnly) {\n        setIsDropdownOpened((prevState) => !prevState)\n        onClickTrigger?.(event)\n      }\n    },\n    [disabled, readOnly, onClickTrigger]\n  )\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo(\n    (): SelectRef => ({\n      handleClickTrigger,\n      handleHideDropdown,\n      getDOMNode,\n    }),\n    [handleClickTrigger, handleHideDropdown, getDOMNode]\n  )\n\n  useEffect(\n    function handleDefaultFocus() {\n      if (defaultFocus && !disabled && !readOnly) {\n        setIsDropdownOpened(true)\n      }\n    },\n    [defaultFocus, disabled, readOnly]\n  )\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  return (\n    <div\n      style={style}\n      className={classNames(styles.SelectContainer, className)}\n      ref={containerRef}\n    >\n      <BaseButton\n        className={classNames(\n          styles.SelectTrigger,\n          getFormFieldSizeClassName(size),\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active\n        )}\n        ref={triggerRef}\n        disabled={disabled}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          {isBezierIcon(leftContent) ? (\n            <Icon\n              source={leftContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            leftContent\n          )}\n\n          <Text\n            data-testid=\"bezier-select-trigger-text\"\n            typo=\"14\"\n            truncated\n            color={hasContent ? textColor : 'txt-black-dark'}\n          >\n            {hasContent ? text : placeholder}\n          </Text>\n\n          {isBezierIcon(rightContent) ? (\n            <Icon\n              source={rightContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            rightContent\n          )}\n        </div>\n\n        {!withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size=\"xs\"\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        )}\n      </BaseButton>\n\n      <Overlay\n        zIndex={dropdownZIndex}\n        style={dropdownStyle}\n        className={classNames(styles.SelectDropdown, dropdownClassName)}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        keepInContainer={dropdownKeepInContainer}\n        data-testid={SELECT_DROPDOWN_TEST_ID}\n        onHide={handleHideDropdown}\n      >\n        {children}\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","sizeProps","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","dropdownKeepInContainer","onClickTrigger","onHideDropdown","rest","forwardedRef","_ref","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","_jsxs","classNames","styles","SelectContainer","ref","BaseButton","SelectTrigger","getFormFieldSizeClassName","invalid","readonly","active","onClick","SelectMainContent","isBezierIcon","_jsx","Icon","source","marginRight","color","Text","typo","truncated","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","zIndex","SelectDropdown","withTransition","show","marginX","marginY","target","container","position","keepInContainer","onHide"],"mappings":";;;;;;;;;;;;;AAiCO,MAAMA,uBAAuB,GAAG;MAE1BC,MAAM,gBAAGC,UAAU,CAAyB,SAASD,MAAMA,CACtE;EACEE,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,IAAI,EAAEC,SAAS;AACfC,EAAAA,YAAY,GAAG,KAAK;AACpBC,EAAAA,WAAW,GAAG,EAAE;EAChBC,WAAW;EACXC,YAAY;AACZC,EAAAA,SAAS,GAAG,gBAAgB;EAC5BC,IAAI;AACJC,EAAAA,SAAS,GAAG,mBAAmB;AAC/BC,EAAAA,cAAc,GAAG,KAAK;EACtBC,aAAa;EACbC,iBAAiB;EACjBC,iBAAiB;EACjBC,eAAe;AACfC,EAAAA,eAAe,GAAG,CAAC;AACnBC,EAAAA,cAAc,GAAG,SAAS;AAC1BC,EAAAA,gBAAgB,GAAG,aAAa;AAChCC,EAAAA,uBAAuB,GAAG,KAAK;EAC/BC,cAAc;EACdC,cAAc;EACd,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,IAAA;EACA,MAAM;IACJC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACRzB,IAAAA,IAAI,EAAE0B,aAAa;IACnB,GAAGC;AACL,GAAC,GAAGC,iBAAiB,CAACR,IAAI,CAAC;AAE3B,EAAA,MAAMS,YAAY,GAAGC,MAAM,CAAiB,IAAI,CAAC;AACjD,EAAA,MAAMC,UAAU,GAAGD,MAAM,CAAoB,IAAI,CAAC;AAElD,EAAA,MAAM9B,IAAI,GAAAsB,CAAAA,IAAA,GAAGrB,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAIyB,aAAa,MAAAJ,IAAAA,IAAAA,IAAA,KAAAA,KAAAA,CAAAA,GAAAA,IAAA,GAAI,GAAG;EAE9C,MAAM,CAACU,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAE/D,EAAA,MAAMC,kBAAkB,GAAGC,WAAW,CACnCC,KAAuB,IAAK;AAC3B,IAAA,IAAI,CAACd,QAAQ,IAAI,CAACC,QAAQ,EAAE;AAC1BS,MAAAA,mBAAmB,CAAEK,SAAS,IAAK,CAACA,SAAS,CAAC;AAC9CpB,MAAAA,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,IAAdA,cAAc,CAAGmB,KAAK,CAAC;AACzB;GACD,EACD,CAACd,QAAQ,EAAEC,QAAQ,EAAEN,cAAc,CACrC,CAAC;AAED,EAAA,MAAMqB,kBAAkB,GAAGH,WAAW,CAAC,MAAM;IAC3CH,mBAAmB,CAAC,KAAK,CAAC;AAC1Bd,IAAAA,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAdA,KAAAA,CAAAA,IAAAA,cAAc,EAAI;AACpB,GAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,MAAMqB,UAAU,GAAGJ,WAAW,CAAC,MAAML,UAAU,CAACU,OAAO,EAAE,EAAE,CAAC;AAE5D,EAAA,MAAMC,MAAM,GAAGC,OAAO,CACpB,OAAkB;IAChBR,kBAAkB;IAClBI,kBAAkB;AAClBC,IAAAA;GACD,CAAC,EACF,CAACL,kBAAkB,EAAEI,kBAAkB,EAAEC,UAAU,CACrD,CAAC;AAEDI,EAAAA,SAAS,CACP,SAASC,kBAAkBA,GAAG;AAC5B,IAAA,IAAI3C,YAAY,IAAI,CAACqB,QAAQ,IAAI,CAACC,QAAQ,EAAE;MAC1CS,mBAAmB,CAAC,IAAI,CAAC;AAC3B;GACD,EACD,CAAC/B,YAAY,EAAEqB,QAAQ,EAAEC,QAAQ,CACnC,CAAC;AAEDsB,EAAAA,mBAAmB,CAACzB,YAAY,EAAE,MAAMqB,MAAM,CAAC;AAE/C,EAAA,MAAMK,UAAU,GAAG,CAACC,OAAO,CAACzC,IAAI,CAAC;AAEjC,EAAA,oBACE0C,IAAA,CAAA,KAAA,EAAA;AACEnD,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEmD,UAAU,CAACC,MAAM,CAACC,eAAe,EAAErD,SAAS,CAAE;AACzDsD,IAAAA,GAAG,EAAExB,YAAa;IAAAhC,QAAA,EAAA,cAElBoD,IAAA,CAACK,UAAU,EAAA;AACTvD,MAAAA,SAAS,EAAEmD,UAAU,CACnBC,MAAM,CAACI,aAAa,EACpBC,yBAAyB,CAACxD,IAAI,CAAC,EAC/ByB,QAAQ,IAAI0B,MAAM,CAACM,OAAO,EAC1BjC,QAAQ,IAAI2B,MAAM,CAACO,QAAQ,EAC3B1B,gBAAgB,IAAImB,MAAM,CAACQ,MAC7B,CAAE;AACFN,MAAAA,GAAG,EAAEtB,UAAW;AAChBR,MAAAA,QAAQ,EAAEA,QAAS;AACnBqC,MAAAA,OAAO,EAAEzB,kBAAmB;AAAA,MAAA,GACxBR,QAAQ;AAAA9B,MAAAA,QAAA,gBAEZoD,IAAA,CAAA,KAAA,EAAA;QAAKlD,SAAS,EAAEoD,MAAM,CAACU,iBAAkB;QAAAhE,QAAA,EAAA,CACtCiE,YAAY,CAAC1D,WAAW,CAAC,gBACxB2D,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAE7D,WAAY;AACpBJ,UAAAA,IAAI,EAAC,IAAI;AACTkE,UAAAA,WAAW,EAAE,CAAE;AACfC,UAAAA,KAAK,EAAE7D;AAAU,SAClB,CAAC,GAEFF,WACD,eAED2D,GAAA,CAACK,IAAI,EAAA;AACH,UAAA,aAAA,EAAY,4BAA4B;AACxCC,UAAAA,IAAI,EAAC,IAAI;UACTC,SAAS,EAAA,IAAA;AACTH,UAAAA,KAAK,EAAEpB,UAAU,GAAGvC,SAAS,GAAG,gBAAiB;AAAAX,UAAAA,QAAA,EAEhDkD,UAAU,GAAGxC,IAAI,GAAGJ;SACjB,CAAC,EAEN2D,YAAY,CAACzD,YAAY,CAAC,gBACzB0D,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,MAAM,EAAE5D,YAAa;AACrBL,UAAAA,IAAI,EAAC,IAAI;AACTkE,UAAAA,WAAW,EAAE,CAAE;AACfC,UAAAA,KAAK,EAAE7D;SACR,CAAC,GAEFD,YACD;AAAA,OACE,CAAC,EAEL,CAACI,cAAc,iBACdsD,GAAA,CAACC,IAAI,EAAA;AACHC,QAAAA,MAAM,EAAEjC,gBAAgB,GAAGuC,aAAa,GAAGC,eAAgB;AAC3DxE,QAAAA,IAAI,EAAC,IAAI;AACTmE,QAAAA,KAAK,EAAE3C,QAAQ,GAAG,gBAAgB,GAAG,kBAAmB;AACxDiD,QAAAA,UAAU,EAAE;AAAE,OACf,CACF;AAAA,KACS,CAAC,eAEbV,GAAA,CAACW,OAAO,EAAA;AACNC,MAAAA,MAAM,EAAE5D,cAAe;AACvBjB,MAAAA,KAAK,EAAEY,aAAc;MACrBX,SAAS,EAAEmD,UAAU,CAACC,MAAM,CAACyB,cAAc,EAAEjE,iBAAiB,CAAE;MAChEkE,cAAc,EAAA,IAAA;AACdC,MAAAA,IAAI,EAAE9C,gBAAgB,IAAI,CAACT,QAAS;AACpCwD,MAAAA,OAAO,EAAElE,eAAgB;AACzBmE,MAAAA,OAAO,EAAElE,eAAgB;MACzBmE,MAAM,EAAElD,UAAU,CAACU,OAAQ;AAC3ByC,MAAAA,SAAS,EAAEtE,iBAAiB,IAAIiB,YAAY,CAACY,OAAQ;AACrD0C,MAAAA,QAAQ,EAAEnE,gBAAiB;AAC3BoE,MAAAA,eAAe,EAAEnE,uBAAwB;AACzC,MAAA,aAAA,EAAavB,uBAAwB;AACrC2F,MAAAA,MAAM,EAAE9C,kBAAmB;AAAA1C,MAAAA,QAAA,EAE1BA;AAAQ,KACF,CAAC;AAAA,GACP,CAAC;AAEV,CAAC;;;;"}
+{"version":3,"file":"Select.mjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport * as React from 'react'\n\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  isBezierIcon,\n} from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Overlay } from '~/src/components/Overlay'\nimport { Text } from '~/src/components/Text'\n\nimport { type SelectProps, type SelectRef } from './Select.types'\n\nimport styles from './Select.module.scss'\n\nexport const SELECT_DROPDOWN_TEST_ID = 'bezier-select-dropdown'\n\nexport const Select = forwardRef<SelectRef, SelectProps>(function Select(\n  {\n    children,\n    style,\n    className,\n    size: sizeProps,\n    defaultFocus = false,\n    placeholder = '',\n    leftContent,\n    rightContent,\n    iconColor = 'txt-black-dark',\n    text,\n    textColor = 'txt-black-darkest',\n    withoutChevron = false,\n    dropdownStyle,\n    dropdownClassName,\n    dropdownContainer,\n    dropdownMarginX,\n    dropdownMarginY = 6,\n    dropdownZIndex = 'overlay',\n    dropdownPosition = 'bottom-left',\n    dropdownKeepInContainer = false,\n    onClickTrigger,\n    onHideDropdown,\n    ...rest\n  },\n  forwardedRef\n) {\n  const {\n    disabled,\n    readOnly,\n    hasError,\n    size: formFieldSize,\n    ...ownProps\n  } = useFormFieldProps(rest)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const size = sizeProps ?? formFieldSize ?? 'm'\n\n  const [isDropdownOpened, setIsDropdownOpened] = useState(false)\n\n  const handleClickTrigger = useCallback(\n    (event: React.MouseEvent) => {\n      if (!disabled && !readOnly) {\n        setIsDropdownOpened((prevState) => !prevState)\n        onClickTrigger?.(event)\n      }\n    },\n    [disabled, readOnly, onClickTrigger]\n  )\n\n  const handleHideDropdown = useCallback(() => {\n    setIsDropdownOpened(false)\n    onHideDropdown?.()\n  }, [onHideDropdown])\n\n  const getDOMNode = useCallback(() => triggerRef.current, [])\n\n  const handle = useMemo(\n    (): SelectRef => ({\n      handleClickTrigger,\n      handleHideDropdown,\n      getDOMNode,\n    }),\n    [handleClickTrigger, handleHideDropdown, getDOMNode]\n  )\n\n  useEffect(\n    function handleDefaultFocus() {\n      if (defaultFocus && !disabled && !readOnly) {\n        setIsDropdownOpened(true)\n      }\n    },\n    [defaultFocus, disabled, readOnly]\n  )\n\n  useImperativeHandle(forwardedRef, () => handle)\n\n  const hasContent = !isEmpty(text)\n\n  const Content = (() => {\n    if (!hasContent) {\n      return (\n        <Text\n          data-testid=\"bezier-select-trigger-text\"\n          typo=\"14\"\n          truncated\n          color=\"txt-black-dark\"\n        >\n          {placeholder}\n        </Text>\n      )\n    }\n\n    if (typeof text === 'string') {\n      return (\n        <Text\n          data-testid=\"bezier-select-trigger-text\"\n          typo=\"14\"\n          truncated\n          color={textColor}\n        >\n          {text}\n        </Text>\n      )\n    }\n\n    return text\n  })()\n\n  return (\n    <div\n      style={style}\n      className={classNames(styles.SelectContainer, className)}\n      ref={containerRef}\n    >\n      <BaseButton\n        className={classNames(\n          styles.SelectTrigger,\n          getFormFieldSizeClassName(size),\n          hasError && styles.invalid,\n          readOnly && styles.readonly,\n          isDropdownOpened && styles.active\n        )}\n        ref={triggerRef}\n        disabled={disabled}\n        onClick={handleClickTrigger}\n        {...ownProps}\n      >\n        <div className={styles.SelectMainContent}>\n          {isBezierIcon(leftContent) ? (\n            <Icon\n              source={leftContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            leftContent\n          )}\n\n          {Content}\n\n          {isBezierIcon(rightContent) ? (\n            <Icon\n              source={rightContent}\n              size=\"xs\"\n              marginRight={6}\n              color={iconColor}\n            />\n          ) : (\n            rightContent\n          )}\n        </div>\n\n        {!withoutChevron && (\n          <Icon\n            source={isDropdownOpened ? ChevronUpIcon : ChevronDownIcon}\n            size=\"xs\"\n            color={readOnly ? 'txt-black-dark' : 'txt-black-darker'}\n            marginLeft={6}\n          />\n        )}\n      </BaseButton>\n\n      <Overlay\n        zIndex={dropdownZIndex}\n        style={dropdownStyle}\n        className={classNames(styles.SelectDropdown, dropdownClassName)}\n        withTransition\n        show={isDropdownOpened && !disabled}\n        marginX={dropdownMarginX}\n        marginY={dropdownMarginY}\n        target={triggerRef.current}\n        container={dropdownContainer || containerRef.current}\n        position={dropdownPosition}\n        keepInContainer={dropdownKeepInContainer}\n        data-testid={SELECT_DROPDOWN_TEST_ID}\n        onHide={handleHideDropdown}\n      >\n        {children}\n      </Overlay>\n    </div>\n  )\n})\n"],"names":["SELECT_DROPDOWN_TEST_ID","Select","forwardRef","children","style","className","size","sizeProps","defaultFocus","placeholder","leftContent","rightContent","iconColor","text","textColor","withoutChevron","dropdownStyle","dropdownClassName","dropdownContainer","dropdownMarginX","dropdownMarginY","dropdownZIndex","dropdownPosition","dropdownKeepInContainer","onClickTrigger","onHideDropdown","rest","forwardedRef","_ref","disabled","readOnly","hasError","formFieldSize","ownProps","useFormFieldProps","containerRef","useRef","triggerRef","isDropdownOpened","setIsDropdownOpened","useState","handleClickTrigger","useCallback","event","prevState","handleHideDropdown","getDOMNode","current","handle","useMemo","useEffect","handleDefaultFocus","useImperativeHandle","hasContent","isEmpty","Content","_jsx","Text","typo","truncated","color","_jsxs","classNames","styles","SelectContainer","ref","BaseButton","SelectTrigger","getFormFieldSizeClassName","invalid","readonly","active","onClick","SelectMainContent","isBezierIcon","Icon","source","marginRight","ChevronUpIcon","ChevronDownIcon","marginLeft","Overlay","zIndex","SelectDropdown","withTransition","show","marginX","marginY","target","container","position","keepInContainer","onHide"],"mappings":"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"}

package/dist/types/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAIjE,eAAO,MAAM,uBAAuB,2BAA2B,CAAA;AAE/D,eAAO,MAAM,MAAM,+EAmKjB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAIjE,eAAO,MAAM,uBAAuB,2BAA2B,CAAA;AAE/D,eAAO,MAAM,MAAM,+EA0LjB,CAAA"}

package/dist/types/components/Select/Select.types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { type BezierIcon } from '@channel.io/bezier-icons';
 import type { AdditionalColorProps, AdditionalOverridableStyleProps, BezierComponentProps, ChildrenProps, FormFieldProps, FormFieldSize, SideContentProps, SizeProps } from "../../types/props";
 import { type ZIndex } from "../../types/tokens";
@@ -10,7 +11,7 @@ export interface SelectRef {
 interface SelectOwnProps {
     defaultFocus?: boolean;
     placeholder?: string;
-    text?: string;
+    text?: ReactNode;
     withoutChevron?: boolean;
     dropdownContainer?: HTMLElement | null;
     dropdownMarginX?: OverlayProps['marginX'];

package/dist/types/components/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,EACV,oBAAoB,EACpB,+BAA+B,EAC/B,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,SAAS,EACV,0BAAyB;AAC1B,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAgC;AAE5D,MAAM,WAAW,SAAS;IACxB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAA;IACjD,kBAAkB,IAAI,IAAI,CAAA;IAC1B,UAAU,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC3C,uBAAuB,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IACzD,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,QAAQ,CAAC,EACpC,aAAa,EACb,cAAc,EACd,SAAS,CAAC,aAAa,CAAC,EACxB,gBAAgB,CACd,UAAU,GAAG,KAAK,CAAC,SAAS,EAC5B,UAAU,GAAG,KAAK,CAAC,SAAS,CAC7B,EACD,+BAA+B,CAAC,UAAU,CAAC,EAC3C,oBAAoB,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACtC,cAAc;CAAG"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,EACV,oBAAoB,EACpB,+BAA+B,EAC/B,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,SAAS,EACV,0BAAyB;AAC1B,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAgC;AAE5D,MAAM,WAAW,SAAS;IACxB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,IAAI,CAAA;IACjD,kBAAkB,IAAI,IAAI,CAAA;IAC1B,UAAU,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,eAAe,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACzC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC3C,uBAAuB,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IACzD,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,QAAQ,CAAC,EACpC,aAAa,EACb,cAAc,EACd,SAAS,CAAC,aAAa,CAAC,EACxB,gBAAgB,CACd,UAAU,GAAG,KAAK,CAAC,SAAS,EAC5B,UAAU,GAAG,KAAK,CAAC,SAAS,CAC7B,EACD,+BAA+B,CAAC,UAAU,CAAC,EAC3C,oBAAoB,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACtC,cAAc;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",

package/src/components/Select/Select.tsx

@@ -115,6 +115,36 @@ export const Select = forwardRef<SelectRef, SelectProps>(function Select(
 
   const hasContent = !isEmpty(text)
 
+  const Content = (() => {
+    if (!hasContent) {
+      return (
+        <Text
+          data-testid="bezier-select-trigger-text"
+          typo="14"
+          truncated
+          color="txt-black-dark"
+        >
+          {placeholder}
+        </Text>
+      )
+    }
+
+    if (typeof text === 'string') {
+      return (
+        <Text
+          data-testid="bezier-select-trigger-text"
+          typo="14"
+          truncated
+          color={textColor}
+        >
+          {text}
+        </Text>
+      )
+    }
+
+    return text
+  })()
+
   return (
     <div
       style={style}
@@ -146,14 +176,7 @@ export const Select = forwardRef<SelectRef, SelectProps>(function Select(
             leftContent
           )}
 
-          <Text
-            data-testid="bezier-select-trigger-text"
-            typo="14"
-            truncated
-            color={hasContent ? textColor : 'txt-black-dark'}
-          >
-            {hasContent ? text : placeholder}
-          </Text>
+          {Content}
 
           {isBezierIcon(rightContent) ? (
             <Icon

package/src/components/Select/Select.types.ts

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react'
+
 import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
@@ -23,7 +25,7 @@ export interface SelectRef {
 interface SelectOwnProps {
   defaultFocus?: boolean
   placeholder?: string
-  text?: string
+  text?: ReactNode
   withoutChevron?: boolean
   dropdownContainer?: HTMLElement | null
   dropdownMarginX?: OverlayProps['marginX']