@channel.io/bezier-react 2.6.2 → 3.0.0

package/dist/esm/components/Tabs/Tabs.mjs

@@ -1,37 +1,17 @@
-import React__default, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { OpenInNewIcon } from '@channel.io/bezier-icons';
-import { Root as $69cb30bb0017df05$export$be92b6f5f03c0fe9, TabsList as $69cb30bb0017df05$export$9712d22edc0d78c1, TabsTrigger as $69cb30bb0017df05$export$8114b9fdfdf9f3ba, Content as $69cb30bb0017df05$export$7c6e2c02157bb7d2 } from '../../node_modules/@radix-ui/react-tabs/dist/index.mjs';
-import { Root as $3dc4ded751c8bdfb$export$be92b6f5f03c0fe9, Button as $3dc4ded751c8bdfb$export$353f5b6fc5456de1, Link as $3dc4ded751c8bdfb$export$a6c7ac8248d6e38a } from '../../node_modules/@radix-ui/react-toolbar/dist/index.mjs';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { Root as Root2, TabsList, TabsTrigger, Content } from '../../node_modules/@radix-ui/react-tabs/dist/index.mjs';
+import { Root as Root4, Button as Button$1, Link } from '../../node_modules/@radix-ui/react-toolbar/dist/index.mjs';
+import classNames from '../../_virtual/index.mjs';
 import { createContext } from '../../utils/react.mjs';
 import { isNil } from '../../utils/type.mjs';
 import styles from './Tabs.module.scss.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.mjs';
 import { BaseButton } from '../BaseButton/BaseButton.mjs';
 import { Text } from '../Text/Text.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 
-/**
- * `Tabs` is a set of layered section of content.
- *
- * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.
- * @example
- *
- * ```tsx
- * <Tabs>
- *  <TabList>
- *    <TabItems>
- *      <TabItem />
- *    <TabItems />
- *    <TabActions>
- *      <TabAction />
- *    </TabActions>
- *  </TabList>
- *  <TabContent />
- * </Tabs>
- * ```
- */
-
 const Tabs = /*#__PURE__*/forwardRef(function Tabs({
   className,
   activationMode = 'automatic',
@@ -39,12 +19,14 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, Object.assign({
+  return /*#__PURE__*/jsx(Root2, {
     className: classNames(styles.Tabs, className),
     activationMode: activationMode,
     ref: forwardedRef,
-    dir: dir
-  }, rest), children);
+    dir: dir,
+    ...rest,
+    children: children
+  });
 });
 const [TabListContextProvider, useTabListContext] = createContext({
   size: 'm'
@@ -62,12 +44,15 @@ const TabList = /*#__PURE__*/forwardRef(function TabList({
   const heightContextValue = useMemo(() => ({
     size
   }), [size]);
-  return /*#__PURE__*/React__default.createElement(TabListContextProvider, {
-    value: heightContextValue
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
-    className: classNames(styles.TabList, styles[`size-${size}`], className),
-    ref: forwardedRef
-  }, rest), children));
+  return /*#__PURE__*/jsx(TabListContextProvider, {
+    value: heightContextValue,
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames(styles.TabList, styles[`size-${size}`], className),
+      ref: forwardedRef,
+      ...rest,
+      children: children
+    })
+  });
 });
 
 /**
@@ -78,10 +63,12 @@ const TabItems = /*#__PURE__*/forwardRef(function TabItems({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement($69cb30bb0017df05$export$9712d22edc0d78c1, Object.assign({
+  return /*#__PURE__*/jsx(TabsList, {
     className: classNames(styles.TabItems, className),
-    ref: forwardedRef
-  }, rest), children);
+    ref: forwardedRef,
+    ...rest,
+    children: children
+  });
 });
 function getButtonSizeBy(size) {
   return {
@@ -107,19 +94,21 @@ const TabItem = /*#__PURE__*/forwardRef(function TabItem({
   if (typeof children !== 'string') {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement($69cb30bb0017df05$export$8114b9fdfdf9f3ba, {
+  return /*#__PURE__*/jsx(TabsTrigger, {
     disabled: disabled,
     value: value,
-    asChild: true
-  }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    className: classNames(styles.TabItem, className),
-    disabled: disabled,
-    text: children,
-    size: getButtonSizeBy(size),
-    colorVariant: "monochrome-light",
-    styleVariant: "tertiary",
-    ref: forwardedRef
-  }, rest)));
+    asChild: true,
+    children: /*#__PURE__*/jsx(Button, {
+      className: classNames(styles.TabItem, className),
+      disabled: disabled,
+      text: children,
+      size: getButtonSizeBy(size),
+      colorVariant: "monochrome-light",
+      styleVariant: "tertiary",
+      ref: forwardedRef,
+      ...rest
+    })
+  });
 });
 
 /**
@@ -130,10 +119,12 @@ const TabContent = /*#__PURE__*/forwardRef(function TabContent({
   value,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, Object.assign({
+  return /*#__PURE__*/jsx(Content, {
     value: value,
-    ref: forwardedRef
-  }, rest), children);
+    ref: forwardedRef,
+    ...rest,
+    children: children
+  });
 });
 
 /**
@@ -146,12 +137,14 @@ const TabActions = /*#__PURE__*/forwardRef(function TabActions({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement($3dc4ded751c8bdfb$export$be92b6f5f03c0fe9, Object.assign({
+  return /*#__PURE__*/jsx(Root4, {
     className: classNames(styles.TabActions, className),
     "aria-label": "More actions",
     ref: forwardedRef,
-    dir: dir
-  }, rest), children);
+    dir: dir,
+    ...rest,
+    children: children
+  });
 });
 function getTypoBy(size) {
   return {
@@ -183,30 +176,38 @@ const TabAction = /*#__PURE__*/forwardRef(function TabAction({
     size
   } = useTabListContext();
   const className = classNames(styles.TabAction, styles[`size-${size}`], classNameProp);
-  return isNil(href) ? /*#__PURE__*/React__default.createElement($3dc4ded751c8bdfb$export$353f5b6fc5456de1, Object.assign({
+  return isNil(href) ? /*#__PURE__*/jsx(Button$1, {
     asChild: true,
     className: className,
     onClick: onClick,
-    ref: forwardedRef
-  }, rest), /*#__PURE__*/React__default.createElement(BaseButton, null, /*#__PURE__*/React__default.createElement(Text, {
-    bold: true,
-    typo: getTypoBy(size)
-  }, children))) : /*#__PURE__*/React__default.createElement($3dc4ded751c8bdfb$export$a6c7ac8248d6e38a, Object.assign({
+    ref: forwardedRef,
+    ...rest,
+    children: /*#__PURE__*/jsx(BaseButton, {
+      children: /*#__PURE__*/jsx(Text, {
+        bold: true,
+        typo: getTypoBy(size),
+        children: children
+      })
+    })
+  }) : /*#__PURE__*/jsxs(Link, {
     className: className,
     href: href,
     target: "_blank",
     rel: "noopener noreferrer"
     // @ts-expect-error
     ,
-    ref: forwardedRef
-  }, rest), /*#__PURE__*/React__default.createElement(Text, {
-    bold: true,
-    typo: getTypoBy(size)
-  }, children), /*#__PURE__*/React__default.createElement(Icon, {
-    source: OpenInNewIcon,
-    size: getIconSizeBy(size),
-    marginLeft: 5
-  }));
+    ref: forwardedRef,
+    ...rest,
+    children: [/*#__PURE__*/jsx(Text, {
+      bold: true,
+      typo: getTypoBy(size),
+      children: children
+    }), /*#__PURE__*/jsx(Icon, {
+      source: OpenInNewIcon,
+      size: getIconSizeBy(size),
+      marginLeft: 5
+    })]
+  });
 });
 
 export { TabAction, TabActions, TabContent, TabItem, TabItems, TabList, Tabs };

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, ...rest },\n    forwardedRef\n  ) {\n    const { size } = useTabListContext()\n\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <Button\n          className={classNames(styles.TabItem, className)}\n          disabled={disabled}\n          text={children}\n          size={getButtonSizeBy(size)}\n          colorVariant=\"monochrome-light\"\n          styleVariant=\"tertiary\"\n          ref={forwardedRef}\n          {...rest}\n        />\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","React","createElement","TabsPrimitive","Object","assign","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":";;;;;;;;;;;;;AA+BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;MAEaA,IAAI,gBAAGC,UAAU,CAA4B,SAASD,IAAIA,CACrE;EAAEE,SAAS;AAAEC,EAAAA,cAAc,GAAG,WAAW;EAAEC,GAAG;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACnEC,YAAY,EACZ;EACA,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAkB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACjBV,SAAS,EAAEW,UAAU,CAACC,MAAM,CAACd,IAAI,EAAEE,SAAS,CAAE;AAC9CC,IAAAA,cAAc,EAAEA,cAAe;AAC/BY,IAAAA,GAAG,EAAER,YAAa;AAClBH,IAAAA,GAAG,EAAEA;GACDE,EAAAA,IAAI,CAEPD,EAAAA,QACiB,CAAC;AAEzB,CAAC;AAED,MAAM,CAACW,sBAAsB,EAAEC,iBAAiB,CAAC,GAC/CC,aAAa,CAAsB;AACjCC,EAAAA,IAAI,EAAE;AACR,CAAC,CAAC;;AAEJ;AACA;AACA;MACaC,OAAO,gBAAGnB,UAAU,CAC/B,SAASmB,OAAOA,CAAC;EAAElB,SAAS;EAAEG,QAAQ;AAAEc,EAAAA,IAAI,GAAG,GAAG;EAAE,GAAGb;AAAK,CAAC,EAAEC,YAAY,EAAE;AAC3E,EAAA,MAAMc,kBAAkB,GAAGC,OAAO,CAChC,OAAO;AACLH,IAAAA;AACF,GAAC,CAAC,EACF,CAACA,IAAI,CACP,CAAC;AAED,EAAA,oBACEX,cAAA,CAAAC,aAAA,CAACO,sBAAsB,EAAA;AAACO,IAAAA,KAAK,EAAEF;AAAmB,GAAA,eAChDb,cAAA,CAAAC,aAAA,CAAAE,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEV,IAAAA,SAAS,EAAEW,UAAU,CACnBC,MAAM,CAACM,OAAO,EACdN,MAAM,CAAC,QAAQK,IAAI,CAAA,CAAE,CAAC,EACtBjB,SACF,CAAE;AACFa,IAAAA,GAAG,EAAER;AAAa,GAAA,EACdD,IAAI,CAAA,EAEPD,QACE,CACiB,CAAC;AAE7B,CACF;;AAEA;AACA;AACA;MACamB,QAAQ,gBAAGvB,UAAU,CAChC,SAASuB,QAAQA,CAAC;EAAEtB,SAAS;EAAEG,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EAChE,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAsB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACrBV,SAAS,EAAEW,UAAU,CAACC,MAAM,CAACU,QAAQ,EAAEtB,SAAS,CAAE;AAClDa,IAAAA,GAAG,EAAER;GACDD,EAAAA,IAAI,CAEPD,EAAAA,QACqB,CAAC;AAE7B,CACF;AAEA,SAASoB,eAAeA,CAACN,IAAa,EAAE;EACtC,OACE;AACEO,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE;GACJ,CACDT,IAAI,CAAC;AACT;;AAEA;AACA;AACA;MACaU,OAAO,gBAAG5B,UAAU,CAC/B,SAAS4B,OAAOA,CACd;EAAE3B,SAAS;EAAE4B,QAAQ;EAAEP,KAAK;EAAElB,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACjDC,YAAY,EACZ;EACA,MAAM;AAAEY,IAAAA;GAAM,GAAGF,iBAAiB,EAAE;AAEpC,EAAA,IAAI,OAAOZ,QAAQ,KAAK,QAAQ,EAAE;AAChC,IAAA,OAAO,IAAI;AACb;AAEA,EAAA,oBACEG,cAAA,CAAAC,aAAA,CAACC,yCAAyB,EAAA;AACxBoB,IAAAA,QAAQ,EAAEA,QAAS;AACnBP,IAAAA,KAAK,EAAEA,KAAM;IACbQ,OAAO,EAAA;GAEPvB,eAAAA,cAAA,CAAAC,aAAA,CAACuB,MAAM,EAAArB,MAAA,CAAAC,MAAA,CAAA;IACLV,SAAS,EAAEW,UAAU,CAACC,MAAM,CAACe,OAAO,EAAE3B,SAAS,CAAE;AACjD4B,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,IAAI,EAAE5B,QAAS;AACfc,IAAAA,IAAI,EAAEM,eAAe,CAACN,IAAI,CAAE;AAC5Be,IAAAA,YAAY,EAAC,kBAAkB;AAC/BC,IAAAA,YAAY,EAAC,UAAU;AACvBpB,IAAAA,GAAG,EAAER;GACDD,EAAAA,IAAI,CACT,CACwB,CAAC;AAEhC,CACF;;AAEA;AACA;AACA;MACa8B,UAAU,gBAAGnC,UAAU,CAClC,SAASmC,UAAUA,CAAC;EAAE/B,QAAQ;EAAEkB,KAAK;EAAE,GAAGjB;AAAK,CAAC,EAAEC,YAAY,EAAE;EAC9D,oBACEC,cAAA,CAAAC,aAAA,CAACC,yCAAqB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACpBW,IAAAA,KAAK,EAAEA,KAAM;AACbR,IAAAA,GAAG,EAAER;GACDD,EAAAA,IAAI,CAEPD,EAAAA,QACoB,CAAC;AAE5B,CACF;;AAEA;AACA;AACA;AACA;MACagC,UAAU,gBAAGpC,UAAU,CAClC,SAASoC,UAAUA,CAAC;EAAEnC,SAAS;EAAEE,GAAG;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACvE,oBACEC,cAAA,CAAAC,aAAA,CAAC6B,yCAAqB,EAAA3B,MAAA,CAAAC,MAAA,CAAA;IACpBV,SAAS,EAAEW,UAAU,CAACC,MAAM,CAACuB,UAAU,EAAEnC,SAAS,CAAE;AACpD,IAAA,YAAA,EAAW,cAAc;AACzBa,IAAAA,GAAG,EAAER,YAAa;AAClBH,IAAAA,GAAG,EAAEA;GACDE,EAAAA,IAAI,CAEPD,EAAAA,QACoB,CAAC;AAE5B,CACF;AAEA,SAASkC,SAASA,CAACpB,IAAa,EAAE;EAChC,OACE;AACEO,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE;GACJ,CACDT,IAAI,CAAC;AACT;AAEA,SAASqB,aAAaA,CAACrB,IAAa,EAAE;EACpC,OACE;AACEO,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE;GACJ,CACDT,IAAI,CAAC;AACT;;AAEA;AACA;AACA;AACA;MACasB,SAAS,gBAAGxC,UAAU,CAGjC,SAASwC,SAASA,CAClB;AAAEvC,EAAAA,SAAS,EAAEwC,aAAa;EAAEC,IAAI;EAAEtC,QAAQ;EAAEuC,OAAO;EAAE,GAAGtC;AAAK,CAAC,EAC9DC,YAAY,EACZ;EACA,MAAM;AAAEY,IAAAA;GAAM,GAAGF,iBAAiB,EAAE;AACpC,EAAA,MAAMf,SAAS,GAAGW,UAAU,CAC1BC,MAAM,CAAC2B,SAAS,EAChB3B,MAAM,CAAC,QAAQK,IAAI,CAAA,CAAE,CAAC,EACtBuB,aACF,CAAC;AAED,EAAA,OAAOG,KAAK,CAACF,IAAI,CAAC,gBAChBnC,cAAA,CAAAC,aAAA,CAAC6B,yCAAuB,EAAA3B,MAAA,CAAAC,MAAA,CAAA;IACtBmB,OAAO,EAAA,IAAA;AACP7B,IAAAA,SAAS,EAAEA,SAAU;AACrB0C,IAAAA,OAAO,EAAEA,OAAQ;AACjB7B,IAAAA,GAAG,EAAER;AAAa,GAAA,EACdD,IAAI,CAAA,eAERE,cAAA,CAAAC,aAAA,CAACqC,UAAU,EAAA,IAAA,eACTtC,cAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAEV,SAAS,CAACpB,IAAI;AAAE,GAAA,EAErBd,QACG,CACI,CACW,CAAC,gBAE1BG,cAAA,CAAAC,aAAA,CAAC6B,yCAAqB,EAAA3B,MAAA,CAAAC,MAAA,CAAA;AACpBV,IAAAA,SAAS,EAAEA,SAAU;AACrByC,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC;AACJ;AAAA;AACApC,IAAAA,GAAG,EAAER;AAAa,GAAA,EACdD,IAAI,CAERE,eAAAA,cAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;IACHC,IAAI,EAAA,IAAA;IACJC,IAAI,EAAEV,SAAS,CAACpB,IAAI;AAAE,GAAA,EAErBd,QACG,CAAC,eACPG,cAAA,CAAAC,aAAA,CAAC2C,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAEC,aAAc;AACtBnC,IAAAA,IAAI,EAAEqB,aAAa,CAACrB,IAAI,CAAE;AAC1BoC,IAAAA,UAAU,EAAE;AAAE,GACf,CACoB,CACxB;AACH,CAAC;;;;"}
+{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport { type JSX, forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, ...rest },\n    forwardedRef\n  ) {\n    const { size } = useTabListContext()\n\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <Button\n          className={classNames(styles.TabItem, className)}\n          disabled={disabled}\n          text={children}\n          size={getButtonSizeBy(size)}\n          colorVariant=\"monochrome-light\"\n          styleVariant=\"tertiary\"\n          ref={forwardedRef}\n          {...rest}\n        />\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","_jsx","TabsPrimitive","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","_jsxs","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}

package/dist/esm/components/Tag/Tag.mjs

@@ -1,7 +1,8 @@
-import React__default, { memo, forwardRef } from 'react';
+import { memo, forwardRef } from 'react';
 import { CancelSmallIcon } from '@channel.io/bezier-icons';
 import { isEmpty, isNil } from '../../utils/type.mjs';
 import styles from './Tag.module.scss.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { BaseTagBadge, BaseTagBadgeText } from '../BaseTagBadge/BaseTagBadge.mjs';
 import { Icon } from '../Icon/Icon.mjs';
 
@@ -28,28 +29,31 @@ const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tag({
   onDelete,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement(BaseTagBadge, Object.assign({
+  return /*#__PURE__*/jsxs(BaseTagBadge, {
     ref: forwardedRef,
     size: size,
     variant: variant,
-    "data-testid": TAG_TEST_ID
-  }, rest), !isEmpty(children) && /*#__PURE__*/React__default.createElement(BaseTagBadgeText, {
-    size: size,
-    marginHorizontal: 2,
-    color: "txt-black-darkest"
-  }, children), !isNil(onDelete) && /*#__PURE__*/React__default.createElement(Icon, {
-    role: "button",
-    tabIndex: 0,
-    className: styles.TagDeleteIcon,
-    source: CancelSmallIcon,
-    size: "xs",
-    color: "txt-black-darker",
-    onClick: e => {
-      e.stopPropagation();
-      onDelete(e);
-    },
-    "data-testid": TAG_DELETE_TEST_ID
-  }));
+    "data-testid": TAG_TEST_ID,
+    ...rest,
+    children: [!isEmpty(children) && /*#__PURE__*/jsx(BaseTagBadgeText, {
+      size: size,
+      marginHorizontal: 2,
+      color: "txt-black-darkest",
+      children: children
+    }), !isNil(onDelete) && /*#__PURE__*/jsx(Icon, {
+      role: "button",
+      tabIndex: 0,
+      className: styles.TagDeleteIcon,
+      source: CancelSmallIcon,
+      size: "xs",
+      color: "txt-black-darker",
+      onClick: e => {
+        e.stopPropagation();
+        onDelete(e);
+      },
+      "data-testid": TAG_DELETE_TEST_ID
+    })]
+  });
 }));
 
 export { TAG_DELETE_TEST_ID, TAG_TEST_ID, Tag };

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, memo } from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type TagProps } from './Tag.types'\n\nimport styles from './Tag.module.scss'\n\nexport const TAG_TEST_ID = 'bezier-tag'\nexport const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'\n\n/**\n * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.\n * @example\n * ```tsx\n * <Tag\n *   size=\"m\"\n *   variant=\"default\"\n *   onDelete={handleDelete}\n * >\n *   Payment\n * </Tag>\n * ```\n */\nexport const Tag = memo(\n  forwardRef<HTMLDivElement, TagProps>(function Tag(\n    { size = 'm', variant = 'default', children, onDelete, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={TAG_TEST_ID}\n        {...rest}\n      >\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={2}\n            color=\"txt-black-darkest\"\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n\n        {!isNil(onDelete) && (\n          <Icon\n            role=\"button\"\n            tabIndex={0}\n            className={styles.TagDeleteIcon}\n            source={CancelSmallIcon}\n            size=\"xs\"\n            color=\"txt-black-darker\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDelete(e)\n            }}\n            data-testid={TAG_DELETE_TEST_ID}\n          />\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["TAG_TEST_ID","TAG_DELETE_TEST_ID","Tag","memo","forwardRef","size","variant","children","onDelete","rest","forwardedRef","React","createElement","BaseTagBadge","Object","assign","ref","isEmpty","BaseTagBadgeText","marginHorizontal","color","isNil","Icon","role","tabIndex","className","styles","TagDeleteIcon","source","CancelSmallIcon","onClick","e","stopPropagation"],"mappings":";;;;;;;AAeO,MAAMA,WAAW,GAAG;AACpB,MAAMC,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,GAAG,gBAAGC,IAAI,cACrBC,UAAU,CAA2B,SAASF,GAAGA,CAC/C;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAChEC,YAAY,EACZ;EACA,oBACEC,cAAA,CAAAC,aAAA,CAACC,YAAY,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACXC,IAAAA,GAAG,EAAEN,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;IACjB,aAAaN,EAAAA;AAAY,GAAA,EACrBS,IAAI,CAAA,EAEP,CAACQ,OAAO,CAACV,QAAQ,CAAC,iBACjBI,cAAA,CAAAC,aAAA,CAACM,gBAAgB,EAAA;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXc,IAAAA,gBAAgB,EAAE,CAAE;AACpBC,IAAAA,KAAK,EAAC;AAAmB,GAAA,EAExBb,QACe,CACnB,EAEA,CAACc,KAAK,CAACb,QAAQ,CAAC,iBACfG,cAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,QAAQ,EAAE,CAAE;IACZC,SAAS,EAAEC,MAAM,CAACC,aAAc;AAChCC,IAAAA,MAAM,EAAEC,eAAgB;AACxBxB,IAAAA,IAAI,EAAC,IAAI;AACTe,IAAAA,KAAK,EAAC,kBAAkB;IACxBU,OAAO,EAAGC,CAAC,IAAK;MACdA,CAAC,CAACC,eAAe,EAAE;MACnBxB,QAAQ,CAACuB,CAAC,CAAC;KACX;IACF,aAAa9B,EAAAA;AAAmB,GACjC,CAES,CAAC;AAEnB,CAAC,CACH;;;;"}
+{"version":3,"file":"Tag.mjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type TagProps } from './Tag.types'\n\nimport styles from './Tag.module.scss'\n\nexport const TAG_TEST_ID = 'bezier-tag'\nexport const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'\n\n/**\n * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.\n * @example\n * ```tsx\n * <Tag\n *   size=\"m\"\n *   variant=\"default\"\n *   onDelete={handleDelete}\n * >\n *   Payment\n * </Tag>\n * ```\n */\nexport const Tag = memo(\n  forwardRef<HTMLDivElement, TagProps>(function Tag(\n    { size = 'm', variant = 'default', children, onDelete, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={TAG_TEST_ID}\n        {...rest}\n      >\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={2}\n            color=\"txt-black-darkest\"\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n\n        {!isNil(onDelete) && (\n          <Icon\n            role=\"button\"\n            tabIndex={0}\n            className={styles.TagDeleteIcon}\n            source={CancelSmallIcon}\n            size=\"xs\"\n            color=\"txt-black-darker\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDelete(e)\n            }}\n            data-testid={TAG_DELETE_TEST_ID}\n          />\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["TAG_TEST_ID","TAG_DELETE_TEST_ID","Tag","memo","forwardRef","size","variant","children","onDelete","rest","forwardedRef","_jsxs","BaseTagBadge","ref","isEmpty","_jsx","BaseTagBadgeText","marginHorizontal","color","isNil","Icon","role","tabIndex","className","styles","TagDeleteIcon","source","CancelSmallIcon","onClick","e","stopPropagation"],"mappings":";;;;;;;;AAeO,MAAMA,WAAW,GAAG;AACpB,MAAMC,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,GAAG,gBAAGC,IAAI,cACrBC,UAAU,CAA2B,SAASF,GAAGA,CAC/C;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAChEC,YAAY,EACZ;EACA,oBACEC,IAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaN,WAAY;AAAA,IAAA,GACrBS,IAAI;IAAAF,QAAA,EAAA,CAEP,CAACO,OAAO,CAACP,QAAQ,CAAC,iBACjBQ,GAAA,CAACC,gBAAgB,EAAA;AACfX,MAAAA,IAAI,EAAEA,IAAK;AACXY,MAAAA,gBAAgB,EAAE,CAAE;AACpBC,MAAAA,KAAK,EAAC,mBAAmB;AAAAX,MAAAA,QAAA,EAExBA;KACe,CACnB,EAEA,CAACY,KAAK,CAACX,QAAQ,CAAC,iBACfO,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,QAAQ,EAAE,CAAE;MACZC,SAAS,EAAEC,MAAM,CAACC,aAAc;AAChCC,MAAAA,MAAM,EAAEC,eAAgB;AACxBtB,MAAAA,IAAI,EAAC,IAAI;AACTa,MAAAA,KAAK,EAAC,kBAAkB;MACxBU,OAAO,EAAGC,CAAC,IAAK;QACdA,CAAC,CAACC,eAAe,EAAE;QACnBtB,QAAQ,CAACqB,CAAC,CAAC;OACX;MACF,aAAa5B,EAAAA;AAAmB,KACjC,CACF;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;"}

package/dist/esm/components/Text/Text.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import classNames from '../../_virtual/index.mjs';
 import { getMarginStyles, splitByMarginProps } from '../../types/props-helpers.mjs';
 import { tokenCssVar } from '../../utils/style.mjs';
 import { isNumber } from '../../utils/type.mjs';

package/dist/esm/components/TextArea/TextArea.mjs

@@ -1,10 +1,11 @@
-import React__default, { forwardRef, useRef } from 'react';
-import classNames from '../../node_modules/classnames/index.mjs';
+import { forwardRef, useRef } from 'react';
+import classNames from '../../_virtual/index.mjs';
 import index from '../../node_modules/react-textarea-autosize/dist/react-textarea-autosize.esm.mjs';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.mjs';
 import { useKeyboardActionLockerWhileComposing, COMMON_IME_CONTROL_KEYS } from '../../hooks/useKeyboardActionLockerWhileComposing.mjs';
 import useMergeRefs from '../../hooks/useMergeRefs.mjs';
 import styles from './TextArea.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 import { useFormFieldProps } from '../FormControl/FormControl.mjs';
 
 const TextArea = /*#__PURE__*/forwardRef(function TextArea({
@@ -46,7 +47,8 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__default.createElement(index, Object.assign({}, ownProps, {
+  return /*#__PURE__*/jsx(index, {
+    ...ownProps,
     style: style,
     className: classNames(styles.TextArea, className),
     ref: mergedInputRef,
@@ -58,7 +60,7 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea({
     "data-testid": "bezier-text-area",
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp
-  }));
+  });
 });
 
 export { TextArea };

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useRef } from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\nimport {\n  COMMON_IME_CONTROL_KEYS,\n  useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport type { TextAreaProps } from './TextArea.types'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      style,\n      className,\n      minRows = 6,\n      maxRows = 6,\n      autoFocus = false,\n      value = '',\n      onKeyDown,\n      onKeyUp,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { disabled, readOnly, hasError, ...ownProps } =\n      useFormFieldProps(rest)\n\n    const inputRef = useRef<HTMLTextAreaElement | null>(null)\n    const mergedInputRef = useMergeRefs(inputRef, forwardedRef)\n\n    const { handleKeyDown, handleKeyUp } =\n      useKeyboardActionLockerWhileComposing({\n        keysToLock: COMMON_IME_CONTROL_KEYS,\n        onKeyDown,\n        onKeyUp,\n      })\n\n    useIsomorphicLayoutEffect(function initialAutoFocus() {\n      function setSelectionToEnd() {\n        inputRef.current?.setSelectionRange(\n          inputRef.current?.value.length,\n          inputRef.current?.value.length\n        )\n      }\n\n      if (autoFocus) {\n        inputRef.current?.focus()\n        setSelectionToEnd()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    return (\n      <TextareaAutosize\n        {...ownProps}\n        style={style}\n        className={classNames(styles.TextArea, className)}\n        ref={mergedInputRef}\n        value={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxRows={maxRows}\n        minRows={minRows}\n        data-testid=\"bezier-text-area\"\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n      />\n    )\n  }\n)\n"],"names":["TextArea","forwardRef","style","className","minRows","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useIsomorphicLayoutEffect","initialAutoFocus","setSelectionToEnd","_inputRef$current","_inputRef$current2","_inputRef$current3","current","setSelectionRange","length","_inputRef$current4","focus","React","createElement","TextareaAutosize","Object","assign","classNames","styles","ref"],"mappings":";;;;;;;;;MAoBaA,QAAQ,gBAAGC,UAAU,CAChC,SAASD,QAAQA,CACf;EACEE,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;AAAS,GAAC,GACjDC,iBAAiB,CAACN,IAAI,CAAC;AAEzB,EAAA,MAAMO,QAAQ,GAAGC,MAAM,CAA6B,IAAI,CAAC;AACzD,EAAA,MAAMC,cAAc,GAAGC,YAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC;EAE3D,MAAM;IAAEU,aAAa;AAAEC,IAAAA;GAAa,GAClCC,qCAAqC,CAAC;AACpCC,IAAAA,UAAU,EAAEC,uBAAuB;IACnCjB,SAAS;AACTC,IAAAA;AACF,GAAC,CAAC;AAEJiB,EAAAA,yBAAyB,CAAC,SAASC,gBAAgBA,GAAG;IACpD,SAASC,iBAAiBA,GAAG;AAAA,MAAA,IAAAC,iBAAA,EAAAC,kBAAA,EAAAC,kBAAA;AAC3B,MAAA,CAAAF,iBAAA,GAAAZ,QAAQ,CAACe,OAAO,cAAAH,iBAAA,KAAA,KAAA,CAAA,IAAhBA,iBAAA,CAAkBI,iBAAiB,CAAAH,CAAAA,kBAAA,GACjCb,QAAQ,CAACe,OAAO,MAAAF,IAAAA,IAAAA,kBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAAkBvB,KAAK,CAAC2B,MAAM,EAAAH,CAAAA,kBAAA,GAC9Bd,QAAQ,CAACe,OAAO,MAAA,IAAA,IAAAD,kBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAAkBxB,KAAK,CAAC2B,MAC1B,CAAC;AACH;AAEA,IAAA,IAAI5B,SAAS,EAAE;AAAA,MAAA,IAAA6B,kBAAA;AACb,MAAA,CAAAA,kBAAA,GAAAlB,QAAQ,CAACe,OAAO,MAAA,IAAA,IAAAG,kBAAA,KAAA,KAAA,CAAA,IAAhBA,kBAAA,CAAkBC,KAAK,EAAE;AACzBR,MAAAA,iBAAiB,EAAE;AACrB;AACA;GACD,EAAE,EAAE,CAAC;EAEN,oBACES,cAAA,CAAAC,aAAA,CAACC,KAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACX1B,QAAQ,EAAA;AACZb,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEuC,UAAU,CAACC,MAAM,CAAC3C,QAAQ,EAAEG,SAAS,CAAE;AAClDyC,IAAAA,GAAG,EAAEzB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAY,kBAAkB;AAC9BI,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa;AAAY,GAAA,CACtB,CAAC;AAEN,CACF;;;;"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useRef } from 'react'\n\nimport classNames from 'classnames'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\nimport {\n  COMMON_IME_CONTROL_KEYS,\n  useKeyboardActionLockerWhileComposing,\n} from '~/src/hooks/useKeyboardActionLockerWhileComposing'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport type { TextAreaProps } from './TextArea.types'\n\nimport styles from './TextArea.module.scss'\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      style,\n      className,\n      minRows = 6,\n      maxRows = 6,\n      autoFocus = false,\n      value = '',\n      onKeyDown,\n      onKeyUp,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { disabled, readOnly, hasError, ...ownProps } =\n      useFormFieldProps(rest)\n\n    const inputRef = useRef<HTMLTextAreaElement | null>(null)\n    const mergedInputRef = useMergeRefs(inputRef, forwardedRef)\n\n    const { handleKeyDown, handleKeyUp } =\n      useKeyboardActionLockerWhileComposing({\n        keysToLock: COMMON_IME_CONTROL_KEYS,\n        onKeyDown,\n        onKeyUp,\n      })\n\n    useIsomorphicLayoutEffect(function initialAutoFocus() {\n      function setSelectionToEnd() {\n        inputRef.current?.setSelectionRange(\n          inputRef.current?.value.length,\n          inputRef.current?.value.length\n        )\n      }\n\n      if (autoFocus) {\n        inputRef.current?.focus()\n        setSelectionToEnd()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    return (\n      <TextareaAutosize\n        {...ownProps}\n        style={style}\n        className={classNames(styles.TextArea, className)}\n        ref={mergedInputRef}\n        value={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxRows={maxRows}\n        minRows={minRows}\n        data-testid=\"bezier-text-area\"\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n      />\n    )\n  }\n)\n"],"names":["TextArea","forwardRef","style","className","minRows","maxRows","autoFocus","value","onKeyDown","onKeyUp","rest","forwardedRef","disabled","readOnly","hasError","ownProps","useFormFieldProps","inputRef","useRef","mergedInputRef","useMergeRefs","handleKeyDown","handleKeyUp","useKeyboardActionLockerWhileComposing","keysToLock","COMMON_IME_CONTROL_KEYS","useIsomorphicLayoutEffect","initialAutoFocus","setSelectionToEnd","_inputRef$current","_inputRef$current2","_inputRef$current3","current","setSelectionRange","length","_inputRef$current4","focus","_jsx","TextareaAutosize","classNames","styles","ref"],"mappings":";;;;;;;;;;MAoBaA,QAAQ,gBAAGC,UAAU,CAChC,SAASD,QAAQA,CACf;EACEE,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,OAAO,GAAG,CAAC;AACXC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,KAAK,GAAG,EAAE;EACVC,SAAS;EACTC,OAAO;EACP,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;AAAS,GAAC,GACjDC,iBAAiB,CAACN,IAAI,CAAC;AAEzB,EAAA,MAAMO,QAAQ,GAAGC,MAAM,CAA6B,IAAI,CAAC;AACzD,EAAA,MAAMC,cAAc,GAAGC,YAAY,CAACH,QAAQ,EAAEN,YAAY,CAAC;EAE3D,MAAM;IAAEU,aAAa;AAAEC,IAAAA;GAAa,GAClCC,qCAAqC,CAAC;AACpCC,IAAAA,UAAU,EAAEC,uBAAuB;IACnCjB,SAAS;AACTC,IAAAA;AACF,GAAC,CAAC;AAEJiB,EAAAA,yBAAyB,CAAC,SAASC,gBAAgBA,GAAG;IACpD,SAASC,iBAAiBA,GAAG;AAAA,MAAA,IAAAC,iBAAA,EAAAC,kBAAA,EAAAC,kBAAA;AAC3B,MAAA,CAAAF,iBAAA,GAAAZ,QAAQ,CAACe,OAAO,cAAAH,iBAAA,KAAA,KAAA,CAAA,IAAhBA,iBAAA,CAAkBI,iBAAiB,CAAAH,CAAAA,kBAAA,GACjCb,QAAQ,CAACe,OAAO,MAAAF,IAAAA,IAAAA,kBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAAkBvB,KAAK,CAAC2B,MAAM,EAAAH,CAAAA,kBAAA,GAC9Bd,QAAQ,CAACe,OAAO,MAAA,IAAA,IAAAD,kBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAAkBxB,KAAK,CAAC2B,MAC1B,CAAC;AACH;AAEA,IAAA,IAAI5B,SAAS,EAAE;AAAA,MAAA,IAAA6B,kBAAA;AACb,MAAA,CAAAA,kBAAA,GAAAlB,QAAQ,CAACe,OAAO,MAAA,IAAA,IAAAG,kBAAA,KAAA,KAAA,CAAA,IAAhBA,kBAAA,CAAkBC,KAAK,EAAE;AACzBR,MAAAA,iBAAiB,EAAE;AACrB;AACA;GACD,EAAE,EAAE,CAAC;EAEN,oBACES,GAAA,CAACC,KAAgB,EAAA;AAAA,IAAA,GACXvB,QAAQ;AACZb,IAAAA,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEoC,UAAU,CAACC,MAAM,CAACxC,QAAQ,EAAEG,SAAS,CAAE;AAClDsC,IAAAA,GAAG,EAAEtB,cAAe;AACpBZ,IAAAA,KAAK,EAAEA,KAAM;AACbK,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBR,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAY,kBAAkB;AAC9BI,IAAAA,SAAS,EAAEa,aAAc;AACzBZ,IAAAA,OAAO,EAAEa;AAAY,GACtB,CAAC;AAEN,CACF;;;;"}

package/dist/esm/components/TextField/TextField.mjs

@@ -1,11 +1,13 @@
-import React__default, { forwardRef, useRef, useCallback, useMemo, useImperativeHandle, useEffect } from 'react';
+import * as React from 'react';
+import { forwardRef, useRef, useCallback, useMemo, useImperativeHandle, useEffect } from 'react';
 import { CancelCircleFilledIcon } from '@channel.io/bezier-icons';
-import classNames from '../../node_modules/classnames/index.mjs';
+import classNames from '../../_virtual/index.mjs';
 import { useKeyboardActionLockerWhileComposing, COMMON_IME_CONTROL_KEYS } from '../../hooks/useKeyboardActionLockerWhileComposing.mjs';
 import { getFormFieldSizeClassName } from '../../types/props-helpers.mjs';
 import { toString } from '../../utils/string.mjs';
 import { isNil, isEmpty, isArray } from '../../utils/type.mjs';
 import styles from './TextField.module.scss.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useWindow } from '../WindowProvider/WindowProvider.mjs';
 import { useFormFieldProps } from '../FormControl/FormControl.mjs';
 import { BaseButton } from '../BaseButton/BaseButton.mjs';
@@ -37,7 +39,7 @@ function TextFieldLeftContent({
   const Content = (() => {
     if ('icon' in children) {
       var _children$iconColor;
-      return /*#__PURE__*/React__default.createElement(Icon, {
+      return /*#__PURE__*/jsx(Icon, {
         className: !isNil(children.onClick) ? styles.clickable : undefined,
         source: children.icon,
         size: "s",
@@ -50,10 +52,11 @@ function TextFieldLeftContent({
   if (withoutWrapper) {
     return Content;
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     style: wrapperStyle,
-    className: classNames(styles.LeftContentWrapper, wrapperClassName)
-  }, Content);
+    className: classNames(styles.LeftContentWrapper, wrapperClassName),
+    children: Content
+  });
 }
 function TextFieldRightContent({
   children,
@@ -65,17 +68,17 @@ function TextFieldRightContent({
     if ('icon' in item) {
       var _item$iconColor;
       const Comp = !isNil(item.onClick) ? BaseButton : 'div';
-      return /*#__PURE__*/React__default.createElement(Comp, {
-        key: key,
+      return /*#__PURE__*/jsx(Comp, {
         className: styles.RightItemWrapper,
-        onClick: item.onClick
-      }, /*#__PURE__*/React__default.createElement(Icon, {
-        source: item.icon,
-        size: "xs",
-        color: (_item$iconColor = item.iconColor) !== null && _item$iconColor !== void 0 ? _item$iconColor : 'txt-black-dark'
-      }));
+        onClick: item.onClick,
+        children: /*#__PURE__*/jsx(Icon, {
+          source: item.icon,
+          size: "xs",
+          color: (_item$iconColor = item.iconColor) !== null && _item$iconColor !== void 0 ? _item$iconColor : 'txt-black-dark'
+        })
+      }, key);
     }
-    return /*#__PURE__*/React__default.cloneElement(item, {
+    return /*#__PURE__*/React.cloneElement(item, {
       key
     });
   }, []);
@@ -84,12 +87,15 @@ function TextFieldRightContent({
   }
   const contents = isArray(children) ? children.map(item => renderRightItem(item, v4())) : renderRightItem(children);
   if (withoutWrapper) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, contents);
+    return /*#__PURE__*/jsx(Fragment, {
+      children: contents
+    });
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     style: wrapperStyle,
-    className: classNames(styles.RightContentWrapper, wrapperClassName)
-  }, contents);
+    className: classNames(styles.RightContentWrapper, wrapperClassName),
+    children: contents
+  });
 }
 const TextField = /*#__PURE__*/forwardRef(function TextField({
   type,
@@ -130,8 +136,8 @@ const TextField = /*#__PURE__*/forwardRef(function TextField({
     size: formFieldSize,
     ...ownProps
   } = useFormFieldProps(rest);
-  const focusTimeout = useRef();
-  const blurTimeout = useRef();
+  const focusTimeout = useRef(undefined);
+  const blurTimeout = useRef(undefined);
   const normalizedValue = isNil(value) ? undefined : toString(value);
   const activeInput = !disabled && !readOnly;
   const activeClear = activeInput && allowClear && !isEmpty(normalizedValue);
@@ -252,47 +258,52 @@ const TextField = /*#__PURE__*/forwardRef(function TextField({
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", {
+    jsxs("div", {
       style: wrapperStyle,
       className: classNames(styles.TextFieldWrapper, styles[`variant-${variant}`], styles[`size-${size}`], getFormFieldSizeClassName(size), wrapperClassName),
       "data-testid": TEXT_INPUT_TEST_ID,
-      onMouseDown: focus
-    }, /*#__PURE__*/React__default.createElement(TextFieldLeftContent, {
-      wrapperStyle: leftWrapperStyle,
-      wrapperClassName: leftWrapperClassName,
-      withoutWrapper: withoutLeftContentWrapper
-    }, leftContent), /*#__PURE__*/React__default.createElement("input", Object.assign({
-      style: style,
-      className: classNames(styles.TextFieldInput, className),
-      ref: inputRef,
-      type: type,
-      value: normalizedValue
-      /**
-       * Invalid size attribute
-       * FIXME: https://github.com/channel-io/bezier-react/issues/1053
-       */,
-      size: INPUT_LENGTH_BY_SIZE[size],
-      autoComplete: autoComplete,
-      readOnly: readOnly,
-      disabled: disabled,
-      onFocus: handleFocus,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp
-    }, ownProps)), activeClear && /*#__PURE__*/React__default.createElement(BaseButton, {
-      className: styles.CloseIconWrapper,
-      tabIndex: 0,
-      onClick: handleClear
-    }, /*#__PURE__*/React__default.createElement(Icon, {
-      className: styles.CloseIcon,
-      "data-testid": TEXT_INPUT_CLEAR_ICON_TEST_ID,
-      source: CancelCircleFilledIcon,
-      size: "xs"
-    })), /*#__PURE__*/React__default.createElement(TextFieldRightContent, {
-      wrapperStyle: rightWrapperStyle,
-      withoutWrapper: withoutRightContentWrapper,
-      wrapperClassName: rightWrapperClassName
-    }, rightContent))
+      onMouseDown: focus,
+      children: [/*#__PURE__*/jsx(TextFieldLeftContent, {
+        wrapperStyle: leftWrapperStyle,
+        wrapperClassName: leftWrapperClassName,
+        withoutWrapper: withoutLeftContentWrapper,
+        children: leftContent
+      }), /*#__PURE__*/jsx("input", {
+        style: style,
+        className: classNames(styles.TextFieldInput, className),
+        ref: inputRef,
+        type: type,
+        value: normalizedValue
+        /**
+         * Invalid size attribute
+         * FIXME: https://github.com/channel-io/bezier-react/issues/1053
+         */,
+        size: INPUT_LENGTH_BY_SIZE[size],
+        autoComplete: autoComplete,
+        readOnly: readOnly,
+        disabled: disabled,
+        onFocus: handleFocus,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        ...ownProps
+      }), activeClear && /*#__PURE__*/jsx(BaseButton, {
+        className: styles.CloseIconWrapper,
+        tabIndex: 0,
+        onClick: handleClear,
+        children: /*#__PURE__*/jsx(Icon, {
+          className: styles.CloseIcon,
+          "data-testid": TEXT_INPUT_CLEAR_ICON_TEST_ID,
+          source: CancelCircleFilledIcon,
+          size: "xs"
+        })
+      }), /*#__PURE__*/jsx(TextFieldRightContent, {
+        wrapperStyle: rightWrapperStyle,
+        withoutWrapper: withoutRightContentWrapper,
+        wrapperClassName: rightWrapperClassName,
+        children: rightContent
+      })]
+    })
   );
 });