@channel.io/bezier-react 2.6.1 → 3.0.0

package/dist/esm/components/KeyValueItem/KeyValueItem.mjs

@@ -1,12 +1,14 @@
-import React__default, { forwardRef } from 'react';
+import * as React from 'react';
+import { forwardRef } from 'react';
 import { isBezierIcon } from '@channel.io/bezier-icons';
-import classNames from '../../node_modules/classnames/index.mjs';
+import classNames from '../../_virtual/index.mjs';
 import { isNil, isEmpty, isArray } from '../../utils/type.mjs';
 import styles from './KeyValueItem.module.scss.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Icon } from '../Icon/Icon.mjs';
 import { Text } from '../Text/Text.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
 import { Button } from '../Button/Button.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
 
 const KEY_VALUE_ITEM_TEST_ID = 'bezier-key-value-item';
 const KEY_VALUE_ITEM_KEY_ICON_TEST_ID = 'bezier-key-value-item-key-icon';
@@ -14,30 +16,33 @@ function KeyItem({
   icon,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles.KeyItem
-  }, isBezierIcon(icon) ? /*#__PURE__*/React__default.createElement(Icon, {
-    size: "s",
-    source: icon,
-    color: "txt-black-dark",
-    "data-testid": KEY_VALUE_ITEM_KEY_ICON_TEST_ID
-  }) : icon, /*#__PURE__*/React__default.createElement(Text, {
-    className: styles.KeyText,
-    bold: true,
-    typo: "12",
-    color: "txt-black-dark",
-    truncated: true
-  }, children));
+  return /*#__PURE__*/jsxs("div", {
+    className: styles.KeyItem,
+    children: [isBezierIcon(icon) ? /*#__PURE__*/jsx(Icon, {
+      size: "s",
+      source: icon,
+      color: "txt-black-dark",
+      "data-testid": KEY_VALUE_ITEM_KEY_ICON_TEST_ID
+    }) : icon, /*#__PURE__*/jsx(Text, {
+      className: styles.KeyText,
+      bold: true,
+      typo: "12",
+      color: "txt-black-dark",
+      truncated: true,
+      children: children
+    })]
+  });
 }
 function ValueItem({
   truncated,
   children
 }) {
-  return /*#__PURE__*/React__default.createElement(Text, {
+  return /*#__PURE__*/jsx(Text, {
     className: styles.ValueItem,
     typo: "14",
-    truncated: truncated
-  }, children);
+    truncated: truncated,
+    children: children
+  });
 }
 function isItemActionWithIcon(args) {
   return 'icon' in args;
@@ -49,16 +54,19 @@ function ActionButton({
     return children;
   }
   const withTooltip = !isEmpty(children.tooltip);
-  const Wrapper = withTooltip ? Tooltip : React__default.Fragment;
-  return /*#__PURE__*/React__default.createElement(Wrapper, withTooltip ? {
-    content: children.tooltip
-  } : {}, /*#__PURE__*/React__default.createElement(Button, {
-    size: "xs",
-    leftContent: children.icon,
-    styleVariant: "tertiary",
-    colorVariant: "monochrome-light",
-    onClick: children.onClick
-  }));
+  const Wrapper = withTooltip ? Tooltip : React.Fragment;
+  return /*#__PURE__*/jsx(Wrapper, {
+    ...(withTooltip ? {
+      content: children.tooltip
+    } : {}),
+    children: /*#__PURE__*/jsx(Button, {
+      size: "xs",
+      leftContent: children.icon,
+      styleVariant: "tertiary",
+      colorVariant: "monochrome-light",
+      onClick: children.onClick
+    })
+  });
 }
 function ActionButtonGroup({
   children
@@ -66,14 +74,17 @@ function ActionButtonGroup({
   if (isNil(children) || isEmpty(children)) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles.ItemAction
-  }, isArray(children) ? children.map((action, index) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  React__default.createElement(ActionButton, {
-    key: index
-  }, action)) : /*#__PURE__*/React__default.createElement(ActionButton, null, children));
+  return /*#__PURE__*/jsx("div", {
+    className: styles.ItemAction,
+    children: isArray(children) ? children.map((action, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    jsx(ActionButton, {
+      children: action
+    }, index)) : /*#__PURE__*/jsx(ActionButton, {
+      children: children
+    })
+  });
 }
 const KeyValueItem = /*#__PURE__*/forwardRef(function KeyValueListItem({
   className,
@@ -85,21 +96,29 @@ const KeyValueItem = /*#__PURE__*/forwardRef(function KeyValueListItem({
   onClickValue,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxs("div", {
     className: classNames(styles.KeyValueItem, styles.singleline, className),
     ref: forwardedRef,
-    "data-testid": KEY_VALUE_ITEM_TEST_ID
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.ItemWrapper, styles.KeyItemWrapper, onClickKey && styles.clickable),
-    onClick: onClickKey
-  }, /*#__PURE__*/React__default.createElement(KeyItem, {
-    icon: keyIcon
-  }, keyContent)), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.ItemWrapper, styles.ValueItemWrapper, onClickValue && styles.clickable),
-    onClick: onClickValue
-  }, /*#__PURE__*/React__default.createElement(ValueItem, {
-    truncated: true
-  }, children), /*#__PURE__*/React__default.createElement(ActionButtonGroup, null, actions)));
+    "data-testid": KEY_VALUE_ITEM_TEST_ID,
+    ...rest,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames(styles.ItemWrapper, styles.KeyItemWrapper, onClickKey && styles.clickable),
+      onClick: onClickKey,
+      children: /*#__PURE__*/jsx(KeyItem, {
+        icon: keyIcon,
+        children: keyContent
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: classNames(styles.ItemWrapper, styles.ValueItemWrapper, onClickValue && styles.clickable),
+      onClick: onClickValue,
+      children: [/*#__PURE__*/jsx(ValueItem, {
+        truncated: true,
+        children: children
+      }), /*#__PURE__*/jsx(ActionButtonGroup, {
+        children: actions
+      })]
+    })]
+  });
 });
 const KeyValueMultiLineItem = /*#__PURE__*/forwardRef(function KeyValueMultiLineListItem({
   children,
@@ -111,19 +130,28 @@ const KeyValueMultiLineItem = /*#__PURE__*/forwardRef(function KeyValueMultiLine
   onClickValue,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxs("div", {
     className: classNames(styles.KeyValueItem, styles.multiline, className),
     ref: forwardedRef,
-    "data-testid": KEY_VALUE_ITEM_TEST_ID
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.ItemWrapper, styles.KeyItemWrapper, onClickKey && styles.clickable),
-    onClick: onClickKey
-  }, /*#__PURE__*/React__default.createElement(KeyItem, {
-    icon: keyIcon
-  }, keyContent), /*#__PURE__*/React__default.createElement(ActionButtonGroup, null, actions)), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.ItemWrapper, styles.ValueItemWrapper, onClickValue && styles.clickable),
-    onClick: onClickValue
-  }, /*#__PURE__*/React__default.createElement(ValueItem, null, children)));
+    "data-testid": KEY_VALUE_ITEM_TEST_ID,
+    ...rest,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames(styles.ItemWrapper, styles.KeyItemWrapper, onClickKey && styles.clickable),
+      onClick: onClickKey,
+      children: [/*#__PURE__*/jsx(KeyItem, {
+        icon: keyIcon,
+        children: keyContent
+      }), /*#__PURE__*/jsx(ActionButtonGroup, {
+        children: actions
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: classNames(styles.ItemWrapper, styles.ValueItemWrapper, onClickValue && styles.clickable),
+      onClick: onClickValue,
+      children: /*#__PURE__*/jsx(ValueItem, {
+        children: children
+      })
+    })]
+  });
 });
 
 export { KEY_VALUE_ITEM_KEY_ICON_TEST_ID, KEY_VALUE_ITEM_TEST_ID, KeyValueItem, KeyValueMultiLineItem };

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueItem.mjs","sources":["../../../../src/components/KeyValueItem/KeyValueItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isArray, isEmpty, isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Text, type TextProps } from '~/src/components/Text'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport {\n  type ItemActionWithIcon,\n  type KeyValueItemAction,\n  type KeyValueItemProps,\n} from './KeyValueItem.types'\n\nimport styles from './KeyValueItem.module.scss'\n\nexport const KEY_VALUE_ITEM_TEST_ID = 'bezier-key-value-item'\nexport const KEY_VALUE_ITEM_KEY_ICON_TEST_ID = 'bezier-key-value-item-key-icon'\n\nfunction KeyItem({\n  icon,\n  children,\n}: {\n  icon: KeyValueItemProps['keyIcon']\n  children: React.ReactNode\n}) {\n  return (\n    <div className={styles.KeyItem}>\n      {isBezierIcon(icon) ? (\n        <Icon\n          size=\"s\"\n          source={icon}\n          color=\"txt-black-dark\"\n          data-testid={KEY_VALUE_ITEM_KEY_ICON_TEST_ID}\n        />\n      ) : (\n        icon\n      )}\n\n      <Text\n        className={styles.KeyText}\n        bold\n        typo=\"12\"\n        color=\"txt-black-dark\"\n        truncated\n      >\n        {children}\n      </Text>\n    </div>\n  )\n}\n\nfunction ValueItem({ truncated, children }: TextProps) {\n  return (\n    <Text\n      className={styles.ValueItem}\n      typo=\"14\"\n      truncated={truncated}\n    >\n      {children}\n    </Text>\n  )\n}\n\nfunction isItemActionWithIcon(args: object): args is ItemActionWithIcon {\n  return 'icon' in args\n}\n\nfunction ActionButton({ children }: { children: KeyValueItemAction }) {\n  if (!isItemActionWithIcon(children)) {\n    return children\n  }\n\n  const withTooltip = !isEmpty(children.tooltip)\n  const Wrapper = withTooltip ? Tooltip : React.Fragment\n\n  return (\n    <Wrapper {...(withTooltip ? { content: children.tooltip } : {})}>\n      <Button\n        size=\"xs\"\n        leftContent={children.icon}\n        styleVariant=\"tertiary\"\n        colorVariant=\"monochrome-light\"\n        onClick={children.onClick}\n      />\n    </Wrapper>\n  )\n}\n\nfunction ActionButtonGroup({\n  children,\n}: {\n  children: KeyValueItemProps['actions']\n}) {\n  if (isNil(children) || isEmpty(children)) {\n    return null\n  }\n\n  return (\n    <div className={styles.ItemAction}>\n      {isArray(children) ? (\n        children.map((action, index) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <ActionButton key={index}>{action}</ActionButton>\n        ))\n      ) : (\n        <ActionButton>{children}</ActionButton>\n      )}\n    </div>\n  )\n}\n\nexport const KeyValueItem = forwardRef<HTMLDivElement, KeyValueItemProps>(\n  function KeyValueListItem(\n    {\n      className,\n      keyIcon,\n      keyContent,\n      actions,\n      children,\n      onClickKey,\n      onClickValue,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    return (\n      <div\n        className={classNames(\n          styles.KeyValueItem,\n          styles.singleline,\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={KEY_VALUE_ITEM_TEST_ID}\n        {...rest}\n      >\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.KeyItemWrapper,\n            onClickKey && styles.clickable\n          )}\n          onClick={onClickKey}\n        >\n          <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n        </div>\n\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.ValueItemWrapper,\n            onClickValue && styles.clickable\n          )}\n          onClick={onClickValue}\n        >\n          <ValueItem truncated>{children}</ValueItem>\n\n          <ActionButtonGroup>{actions}</ActionButtonGroup>\n        </div>\n      </div>\n    )\n  }\n)\n\nexport const KeyValueMultiLineItem = forwardRef<\n  HTMLDivElement,\n  KeyValueItemProps\n>(function KeyValueMultiLineListItem(\n  {\n    children,\n    className,\n    keyIcon,\n    keyContent,\n    actions,\n    onClickKey,\n    onClickValue,\n    ...rest\n  },\n  forwardedRef\n) {\n  return (\n    <div\n      className={classNames(styles.KeyValueItem, styles.multiline, className)}\n      ref={forwardedRef}\n      data-testid={KEY_VALUE_ITEM_TEST_ID}\n      {...rest}\n    >\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.KeyItemWrapper,\n          onClickKey && styles.clickable\n        )}\n        onClick={onClickKey}\n      >\n        <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n\n        <ActionButtonGroup>{actions}</ActionButtonGroup>\n      </div>\n\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.ValueItemWrapper,\n          onClickValue && styles.clickable\n        )}\n        onClick={onClickValue}\n      >\n        <ValueItem>{children}</ValueItem>\n      </div>\n    </div>\n  )\n})\n"],"names":["KEY_VALUE_ITEM_TEST_ID","KEY_VALUE_ITEM_KEY_ICON_TEST_ID","KeyItem","icon","children","React","createElement","className","styles","isBezierIcon","Icon","size","source","color","Text","KeyText","bold","typo","truncated","ValueItem","isItemActionWithIcon","args","ActionButton","withTooltip","isEmpty","tooltip","Wrapper","Tooltip","Fragment","content","Button","leftContent","styleVariant","colorVariant","onClick","ActionButtonGroup","isNil","ItemAction","isArray","map","action","index","key","KeyValueItem","forwardRef","KeyValueListItem","keyIcon","keyContent","actions","onClickKey","onClickValue","rest","forwardedRef","Object","assign","classNames","singleline","ref","ItemWrapper","KeyItemWrapper","clickable","ValueItemWrapper","KeyValueMultiLineItem","KeyValueMultiLineListItem","multiline"],"mappings":"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"}
+{"version":3,"file":"KeyValueItem.mjs","sources":["../../../../src/components/KeyValueItem/KeyValueItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isArray, isEmpty, isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Text, type TextProps } from '~/src/components/Text'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport {\n  type ItemActionWithIcon,\n  type KeyValueItemAction,\n  type KeyValueItemProps,\n} from './KeyValueItem.types'\n\nimport styles from './KeyValueItem.module.scss'\n\nexport const KEY_VALUE_ITEM_TEST_ID = 'bezier-key-value-item'\nexport const KEY_VALUE_ITEM_KEY_ICON_TEST_ID = 'bezier-key-value-item-key-icon'\n\nfunction KeyItem({\n  icon,\n  children,\n}: {\n  icon: KeyValueItemProps['keyIcon']\n  children: React.ReactNode\n}) {\n  return (\n    <div className={styles.KeyItem}>\n      {isBezierIcon(icon) ? (\n        <Icon\n          size=\"s\"\n          source={icon}\n          color=\"txt-black-dark\"\n          data-testid={KEY_VALUE_ITEM_KEY_ICON_TEST_ID}\n        />\n      ) : (\n        icon\n      )}\n\n      <Text\n        className={styles.KeyText}\n        bold\n        typo=\"12\"\n        color=\"txt-black-dark\"\n        truncated\n      >\n        {children}\n      </Text>\n    </div>\n  )\n}\n\nfunction ValueItem({ truncated, children }: TextProps) {\n  return (\n    <Text\n      className={styles.ValueItem}\n      typo=\"14\"\n      truncated={truncated}\n    >\n      {children}\n    </Text>\n  )\n}\n\nfunction isItemActionWithIcon(args: object): args is ItemActionWithIcon {\n  return 'icon' in args\n}\n\nfunction ActionButton({ children }: { children: KeyValueItemAction }) {\n  if (!isItemActionWithIcon(children)) {\n    return children\n  }\n\n  const withTooltip = !isEmpty(children.tooltip)\n  const Wrapper = withTooltip ? Tooltip : React.Fragment\n\n  return (\n    <Wrapper {...(withTooltip ? { content: children.tooltip } : {})}>\n      <Button\n        size=\"xs\"\n        leftContent={children.icon}\n        styleVariant=\"tertiary\"\n        colorVariant=\"monochrome-light\"\n        onClick={children.onClick}\n      />\n    </Wrapper>\n  )\n}\n\nfunction ActionButtonGroup({\n  children,\n}: {\n  children: KeyValueItemProps['actions']\n}) {\n  if (isNil(children) || isEmpty(children)) {\n    return null\n  }\n\n  return (\n    <div className={styles.ItemAction}>\n      {isArray(children) ? (\n        children.map((action, index) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <ActionButton key={index}>{action}</ActionButton>\n        ))\n      ) : (\n        <ActionButton>{children}</ActionButton>\n      )}\n    </div>\n  )\n}\n\nexport const KeyValueItem = forwardRef<HTMLDivElement, KeyValueItemProps>(\n  function KeyValueListItem(\n    {\n      className,\n      keyIcon,\n      keyContent,\n      actions,\n      children,\n      onClickKey,\n      onClickValue,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    return (\n      <div\n        className={classNames(\n          styles.KeyValueItem,\n          styles.singleline,\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={KEY_VALUE_ITEM_TEST_ID}\n        {...rest}\n      >\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.KeyItemWrapper,\n            onClickKey && styles.clickable\n          )}\n          onClick={onClickKey}\n        >\n          <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n        </div>\n\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.ValueItemWrapper,\n            onClickValue && styles.clickable\n          )}\n          onClick={onClickValue}\n        >\n          <ValueItem truncated>{children}</ValueItem>\n\n          <ActionButtonGroup>{actions}</ActionButtonGroup>\n        </div>\n      </div>\n    )\n  }\n)\n\nexport const KeyValueMultiLineItem = forwardRef<\n  HTMLDivElement,\n  KeyValueItemProps\n>(function KeyValueMultiLineListItem(\n  {\n    children,\n    className,\n    keyIcon,\n    keyContent,\n    actions,\n    onClickKey,\n    onClickValue,\n    ...rest\n  },\n  forwardedRef\n) {\n  return (\n    <div\n      className={classNames(styles.KeyValueItem, styles.multiline, className)}\n      ref={forwardedRef}\n      data-testid={KEY_VALUE_ITEM_TEST_ID}\n      {...rest}\n    >\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.KeyItemWrapper,\n          onClickKey && styles.clickable\n        )}\n        onClick={onClickKey}\n      >\n        <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n\n        <ActionButtonGroup>{actions}</ActionButtonGroup>\n      </div>\n\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.ValueItemWrapper,\n          onClickValue && styles.clickable\n        )}\n        onClick={onClickValue}\n      >\n        <ValueItem>{children}</ValueItem>\n      </div>\n    </div>\n  )\n})\n"],"names":["KEY_VALUE_ITEM_TEST_ID","KEY_VALUE_ITEM_KEY_ICON_TEST_ID","KeyItem","icon","children","_jsxs","className","styles","isBezierIcon","_jsx","Icon","size","source","color","Text","KeyText","bold","typo","truncated","ValueItem","isItemActionWithIcon","args","ActionButton","withTooltip","isEmpty","tooltip","Wrapper","Tooltip","React","Fragment","content","Button","leftContent","styleVariant","colorVariant","onClick","ActionButtonGroup","isNil","ItemAction","isArray","map","action","index","KeyValueItem","forwardRef","KeyValueListItem","keyIcon","keyContent","actions","onClickKey","onClickValue","rest","forwardedRef","classNames","singleline","ref","ItemWrapper","KeyItemWrapper","clickable","ValueItemWrapper","KeyValueMultiLineItem","KeyValueMultiLineListItem","multiline"],"mappings":"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"}

package/dist/esm/components/LegacyIcon/LegacyIcon.mjs

@@ -1,5 +1,6 @@
-import React__default, { memo } from 'react';
+import { memo } from 'react';
 import { icons } from '@channel.io/bezier-icons';
+import { jsx } from 'react/jsx-runtime';
 import { Icon } from '../Icon/Icon.mjs';
 
 /**
@@ -24,9 +25,10 @@ const LegacyIcon = /*#__PURE__*/memo(({
   if (!IconSource) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(Icon, Object.assign({
-    source: IconSource
-  }, rest));
+  return /*#__PURE__*/jsx(Icon, {
+    source: IconSource,
+    ...rest
+  });
 });
 
 export { LegacyIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"LegacyIcon.mjs","sources":["../../../../src/components/LegacyIcon/LegacyIcon.tsx"],"sourcesContent":["'use client'\n\nimport React, { memo } from 'react'\n\nimport { icons } from '@channel.io/bezier-icons'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type LegacyIconProps } from './LegacyIcon.types'\n\n/**\n * @deprecated Please import and use individual icons.\n * @example\n * import { AllIcon } from '@channel.io/bezier-icons'\n * import { Icon, type IconProps } from '@channel.io/bezier-react'\n * <Icon source={AllIcon} color=\"bg-black-dark\" />\n * @example <caption>How to validate the bezier icon source</caption>\n * import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'\n * isBezierIcon(AllIcon) // true\n * isBezierIcon(() => <svg>...</svg>) // false\n * @example <caption>Legacy icon component is still available. but it will be removed in future versions!</caption>\n * import { LegacyIcon, type LegacyIconProps } from '@channel.io/bezier-react'\n * <LegacyIcon name=\"all\" color=\"bg-black-dark\" />\n */\nexport const LegacyIcon = memo(({ name, ...rest }: LegacyIconProps) => {\n  const IconSource = icons[name]\n\n  if (!IconSource) {\n    return null\n  }\n\n  return (\n    <Icon\n      source={IconSource}\n      {...rest}\n    />\n  )\n})\n"],"names":["LegacyIcon","memo","name","rest","IconSource","icons","React","createElement","Icon","Object","assign","source"],"mappings":";;;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,UAAU,gBAAGC,IAAI,CAAC,CAAC;EAAEC,IAAI;EAAE,GAAGC,IAAAA;AAAsB,CAAC,KAAK;AACrE,EAAA,MAAMC,UAAU,GAAGC,KAAK,CAACH,IAAI,CAAC,CAAA;EAE9B,IAAI,CAACE,UAAU,EAAE;AACf,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EAEA,oBACEE,cAAA,CAAAC,aAAA,CAACC,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,MAAM,EAAEP,UAAAA;GACJD,EAAAA,IAAI,CACT,CAAC,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"LegacyIcon.mjs","sources":["../../../../src/components/LegacyIcon/LegacyIcon.tsx"],"sourcesContent":["'use client'\n\nimport { memo } from 'react'\n\nimport { icons } from '@channel.io/bezier-icons'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type LegacyIconProps } from './LegacyIcon.types'\n\n/**\n * @deprecated Please import and use individual icons.\n * @example\n * import { AllIcon } from '@channel.io/bezier-icons'\n * import { Icon, type IconProps } from '@channel.io/bezier-react'\n * <Icon source={AllIcon} color=\"bg-black-dark\" />\n * @example <caption>How to validate the bezier icon source</caption>\n * import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'\n * isBezierIcon(AllIcon) // true\n * isBezierIcon(() => <svg>...</svg>) // false\n * @example <caption>Legacy icon component is still available. but it will be removed in future versions!</caption>\n * import { LegacyIcon, type LegacyIconProps } from '@channel.io/bezier-react'\n * <LegacyIcon name=\"all\" color=\"bg-black-dark\" />\n */\nexport const LegacyIcon = memo(({ name, ...rest }: LegacyIconProps) => {\n  const IconSource = icons[name]\n\n  if (!IconSource) {\n    return null\n  }\n\n  return (\n    <Icon\n      source={IconSource}\n      {...rest}\n    />\n  )\n})\n"],"names":["LegacyIcon","memo","name","rest","IconSource","icons","_jsx","Icon","source"],"mappings":";;;;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,UAAU,gBAAGC,IAAI,CAAC,CAAC;EAAEC,IAAI;EAAE,GAAGC;AAAsB,CAAC,KAAK;AACrE,EAAA,MAAMC,UAAU,GAAGC,KAAK,CAACH,IAAI,CAAC;EAE9B,IAAI,CAACE,UAAU,EAAE;AACf,IAAA,OAAO,IAAI;AACb;EAEA,oBACEE,GAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAEJ,UAAW;IAAA,GACfD;AAAI,GACT,CAAC;AAEN,CAAC;;;;"}

package/dist/esm/components/LegacyIcon/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../src/components/LegacyIcon/utils.ts"],"sourcesContent":["import { type IconName, icons } from '@channel.io/bezier-icons'\n\nconst iconNames = new Set(Object.keys(icons))\n\n/**\n * @deprecated Please import and use individual icons.\n * @example\n * import { AllIcon } from '@channel.io/bezier-icons'\n * import { Icon, type IconProps } from '@channel.io/bezier-react'\n * <Icon source={AllIcon} color=\"bg-black-dark\" />\n * @example <caption>How to validate the bezier icon source</caption>\n * import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'\n * isBezierIcon(AllIcon) // true\n * isBezierIcon(() => <svg>...</svg>) // false\n * @example <caption>Legacy icon component is still available. but it will be removed in future versions!</caption>\n * import { LegacyIcon, type LegacyIconProps } from '@channel.io/bezier-react'\n * <LegacyIcon name=\"all\" color=\"bg-black-dark\" />\n */\nexport const isIconName = (name: any): name is IconName => iconNames.has(name)\n"],"names":["iconNames","Set","Object","keys","icons","isIconName","name","has"],"mappings":";;AAEA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,CAAC,CAAA;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAIC,IAAS,IAAuBN,SAAS,CAACO,GAAG,CAACD,IAAI;;;;"}
+{"version":3,"file":"utils.mjs","sources":["../../../../src/components/LegacyIcon/utils.ts"],"sourcesContent":["import { type IconName, icons } from '@channel.io/bezier-icons'\n\nconst iconNames = new Set(Object.keys(icons))\n\n/**\n * @deprecated Please import and use individual icons.\n * @example\n * import { AllIcon } from '@channel.io/bezier-icons'\n * import { Icon, type IconProps } from '@channel.io/bezier-react'\n * <Icon source={AllIcon} color=\"bg-black-dark\" />\n * @example <caption>How to validate the bezier icon source</caption>\n * import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'\n * isBezierIcon(AllIcon) // true\n * isBezierIcon(() => <svg>...</svg>) // false\n * @example <caption>Legacy icon component is still available. but it will be removed in future versions!</caption>\n * import { LegacyIcon, type LegacyIconProps } from '@channel.io/bezier-react'\n * <LegacyIcon name=\"all\" color=\"bg-black-dark\" />\n */\nexport const isIconName = (name: any): name is IconName => iconNames.has(name)\n"],"names":["iconNames","Set","Object","keys","icons","isIconName","name","has"],"mappings":";;AAEA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAIC,IAAS,IAAuBN,SAAS,CAACO,GAAG,CAACD,IAAI;;;;"}

package/dist/esm/components/LegacyStack/LegacyHStack/LegacyHStack.mjs

@@ -1,4 +1,5 @@
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { LegacyStack } from '../LegacyStack/LegacyStack.mjs';
 
 /**
@@ -7,10 +8,11 @@ import { LegacyStack } from '../LegacyStack/LegacyStack.mjs';
  * A container for horizontal flex layout.
  */
 const LegacyHStack = /*#__PURE__*/forwardRef(function HStack(props, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement(LegacyStack, Object.assign({
+  return /*#__PURE__*/jsx(LegacyStack, {
     ref: forwardedRef,
-    direction: "horizontal"
-  }, props));
+    direction: "horizontal",
+    ...props
+  });
 });
 
 export { LegacyHStack };

package/dist/esm/components/LegacyStack/LegacyHStack/LegacyHStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyHStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'\n\nimport type LegacyHStackProps from './LegacyHStack.types'\n\n/**\n * @deprecated Use `HStack` instead.\n *\n * A container for horizontal flex layout.\n */\nexport const LegacyHStack = forwardRef<HTMLElement, LegacyHStackProps>(\n  function HStack(props, forwardedRef) {\n    return (\n      <LegacyStack\n        ref={forwardedRef}\n        direction=\"horizontal\"\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacyHStack","forwardRef","HStack","props","forwardedRef","React","createElement","LegacyStack","Object","assign","ref","direction"],"mappings":";;;AAQA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,cAAA,CAAAC,aAAA,CAACC,WAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACVC,IAAAA,GAAG,EAAEN,YAAa;AAClBO,IAAAA,SAAS,EAAC,YAAA;GACNR,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CACF;;;;"}
+{"version":3,"file":"LegacyHStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyHStack/LegacyHStack.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'\n\nimport type LegacyHStackProps from './LegacyHStack.types'\n\n/**\n * @deprecated Use `HStack` instead.\n *\n * A container for horizontal flex layout.\n */\nexport const LegacyHStack = forwardRef<HTMLElement, LegacyHStackProps>(\n  function HStack(props, forwardedRef) {\n    return (\n      <LegacyStack\n        ref={forwardedRef}\n        direction=\"horizontal\"\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacyHStack","forwardRef","HStack","props","forwardedRef","_jsx","LegacyStack","ref","direction"],"mappings":";;;;AAQA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,GAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,SAAS,EAAC,YAAY;IAAA,GAClBL;AAAK,GACV,CAAC;AAEN,CACF;;;;"}

package/dist/esm/components/LegacyStack/LegacySpacer/LegacySpacer.mjs

@@ -1,17 +1,19 @@
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { LegacyStackItem } from '../LegacyStackItem/LegacyStackItem.mjs';
 
 /**
  * @deprecated Use `Stack` and `justify` prop instead.
  */
 const LegacySpacer = /*#__PURE__*/forwardRef(function Spacer(props, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement(LegacyStackItem, Object.assign({
+  return /*#__PURE__*/jsx(LegacyStackItem, {
     ref: forwardedRef,
     size: 0,
     weight: 1,
     grow: true,
-    shrink: true
-  }, props));
+    shrink: true,
+    ...props
+  });
 });
 
 export { LegacySpacer };

package/dist/esm/components/LegacyStack/LegacySpacer/LegacySpacer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacySpacer.mjs","sources":["../../../../../src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { LegacyStackItem } from '~/src/components/LegacyStack/LegacyStackItem'\n\nimport type LegacySpacerProps from './LegacySpacer.types'\n\n/**\n * @deprecated Use `Stack` and `justify` prop instead.\n */\nexport const LegacySpacer = forwardRef<HTMLElement, LegacySpacerProps>(\n  function Spacer(props, forwardedRef) {\n    return (\n      <LegacyStackItem\n        ref={forwardedRef}\n        size={0}\n        weight={1}\n        grow\n        shrink\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacySpacer","forwardRef","Spacer","props","forwardedRef","React","createElement","LegacyStackItem","Object","assign","ref","size","weight","grow","shrink"],"mappings":";;;AAQA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,cAAA,CAAAC,aAAA,CAACC,eAAe,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACdC,IAAAA,GAAG,EAAEN,YAAa;AAClBO,IAAAA,IAAI,EAAE,CAAE;AACRC,IAAAA,MAAM,EAAE,CAAE;IACVC,IAAI,EAAA,IAAA;IACJC,MAAM,EAAA,IAAA;GACFX,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CACF;;;;"}
+{"version":3,"file":"LegacySpacer.mjs","sources":["../../../../../src/components/LegacyStack/LegacySpacer/LegacySpacer.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { LegacyStackItem } from '~/src/components/LegacyStack/LegacyStackItem'\n\nimport type LegacySpacerProps from './LegacySpacer.types'\n\n/**\n * @deprecated Use `Stack` and `justify` prop instead.\n */\nexport const LegacySpacer = forwardRef<HTMLElement, LegacySpacerProps>(\n  function Spacer(props, forwardedRef) {\n    return (\n      <LegacyStackItem\n        ref={forwardedRef}\n        size={0}\n        weight={1}\n        grow\n        shrink\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacySpacer","forwardRef","Spacer","props","forwardedRef","_jsx","LegacyStackItem","ref","size","weight","grow","shrink"],"mappings":";;;;AAQA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,GAAA,CAACC,eAAe,EAAA;AACdC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,IAAI,EAAE,CAAE;AACRC,IAAAA,MAAM,EAAE,CAAE;IACVC,IAAI,EAAA,IAAA;IACJC,MAAM,EAAA,IAAA;IAAA,GACFR;AAAK,GACV,CAAC;AAEN,CACF;;;;"}

package/dist/esm/components/LegacyStack/LegacyStack/LegacyStack.mjs

@@ -1,26 +1,8 @@
-import React__default, { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
-import classNames from '../../../node_modules/classnames/index.mjs';
+import { forwardRef, useRef, Children, isValidElement, cloneElement } from 'react';
+import classNames from '../../../_virtual/index.mjs';
 import styles from './LegacyStack.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 
-/**
- * @deprecated Use `Stack` instead.
- *
- * `Stack` provides an abstraction of **flex layout** so that
- * rendering of child elements **linearly** can be done
- * with simplified options.
- *
- * `Stack` always fills the parent element.
- *
- * Be reminded to list `StackItem`s to be direct child of `Stack`.
- * @example
- *
- * ```tsx
- * <Stack direction="horizontal" spacing={8}>
- *  <StackItem>{ ... }</StackItem>
- *  <StackItem>{ ... }</StackItem>
- * </Stack>
- * ```
- */
 const LegacyStack = /*#__PURE__*/forwardRef(function Stack({
   as = 'div',
   className,
@@ -33,32 +15,34 @@ const LegacyStack = /*#__PURE__*/forwardRef(function Stack({
 }, forwardedRef) {
   const Comp = as;
   const firstValidElementIdx = useRef(-1);
-  return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
+  return /*#__PURE__*/jsx(Comp, {
     className: classNames(styles.LegacyStack, styles[`direction-${direction}`], styles[`justify-${justify}`], styles[`align-${align}`], className),
     ref: forwardedRef,
-    "data-testid": "bezier-legacy-stack"
-  }, rest), Children.map(children, (element, index) => {
-    var _element$props$margin;
-    if (! /*#__PURE__*/isValidElement(element)) {
-      return element;
-    }
+    "data-testid": "bezier-legacy-stack",
+    ...rest,
+    children: Children.map(children, (element, index) => {
+      var _element$props, _marginBefore, _element$props2;
+      if (! /*#__PURE__*/isValidElement(element)) {
+        return element;
+      }
 
-    /**
-     * NOTE: this assumes that this element is `StackItem`.
-     *
-     * Even if the child is not a `StackItem` component,
-     * it could forward the prop to `StackItem` deeper in the tree,
-     * or implement a custom behavior compatible with `StackItemProps`.
-     */
-    if (firstValidElementIdx.current === -1) {
-      firstValidElementIdx.current = index;
-    }
-    return /*#__PURE__*/cloneElement(element, {
-      ...element.props,
-      direction,
-      marginBefore: (_element$props$margin = element.props.marginBefore) !== null && _element$props$margin !== void 0 ? _element$props$margin : index > firstValidElementIdx.current ? spacing : 0
-    });
-  }));
+      /**
+       * NOTE: this assumes that this element is `StackItem`.
+       *
+       * Even if the child is not a `StackItem` component,
+       * it could forward the prop to `StackItem` deeper in the tree,
+       * or implement a custom behavior compatible with `StackItemProps`.
+       */
+      if (firstValidElementIdx.current === -1) {
+        firstValidElementIdx.current = index;
+      }
+      return /*#__PURE__*/cloneElement(element, {
+        ...((_element$props = element.props) !== null && _element$props !== void 0 ? _element$props : {}),
+        direction,
+        marginBefore: (_marginBefore = (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.marginBefore) !== null && _marginBefore !== void 0 ? _marginBefore : index > firstValidElementIdx.current ? spacing : 0
+      });
+    })
+  });
 });
 
 export { LegacyStack };

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

@@ -1 +1 @@
-{"version":3,"file":"LegacyStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyStack/LegacyStack.tsx"],"sourcesContent":["'use client'\n\nimport React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useRef,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport type LegacyStackProps from './LegacyStack.types'\n\nimport styles from './LegacyStack.module.scss'\n\n/**\n * @deprecated Use `Stack` instead.\n *\n * `Stack` provides an abstraction of **flex layout** so that\n * rendering of child elements **linearly** can be done\n * with simplified options.\n *\n * `Stack` always fills the parent element.\n *\n * Be reminded to list `StackItem`s to be direct child of `Stack`.\n * @example\n *\n * ```tsx\n * <Stack direction=\"horizontal\" spacing={8}>\n *  <StackItem>{ ... }</StackItem>\n *  <StackItem>{ ... }</StackItem>\n * </Stack>\n * ```\n */\nexport const LegacyStack = forwardRef<HTMLElement, LegacyStackProps>(\n  function Stack(\n    {\n      as = 'div',\n      className,\n      children,\n      direction,\n      justify = 'start',\n      align = 'stretch',\n      spacing = 0,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as\n    const firstValidElementIdx = useRef(-1)\n\n    return (\n      <Comp\n        className={classNames(\n          styles.LegacyStack,\n          styles[`direction-${direction}`],\n          styles[`justify-${justify}`],\n          styles[`align-${align}`],\n          className\n        )}\n        ref={forwardedRef}\n        data-testid=\"bezier-legacy-stack\"\n        {...rest}\n      >\n        {Children.map(children, (element, index) => {\n          if (!isValidElement(element)) {\n            return element\n          }\n\n          /**\n           * NOTE: this assumes that this element is `StackItem`.\n           *\n           * Even if the child is not a `StackItem` component,\n           * it could forward the prop to `StackItem` deeper in the tree,\n           * or implement a custom behavior compatible with `StackItemProps`.\n           */\n          if (firstValidElementIdx.current === -1) {\n            firstValidElementIdx.current = index\n          }\n          return cloneElement(element, {\n            ...element.props,\n            direction,\n            marginBefore:\n              element.props.marginBefore ??\n              (index > firstValidElementIdx.current ? spacing : 0),\n          })\n        })}\n      </Comp>\n    )\n  }\n)\n"],"names":["LegacyStack","forwardRef","Stack","as","className","children","direction","justify","align","spacing","rest","forwardedRef","Comp","firstValidElementIdx","useRef","React","createElement","Object","assign","classNames","styles","ref","Children","map","element","index","_element$props$margin","isValidElement","current","cloneElement","props","marginBefore"],"mappings":";;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,WAAW,gBAAGC,UAAU,CACnC,SAASC,KAAKA,CACZ;AACEC,EAAAA,EAAE,GAAG,KAAK;EACVC,SAAS;EACTC,QAAQ;EACRC,SAAS;AACTC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,SAAS;AACjBC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGT,EAAE,CAAA;AACf,EAAA,MAAMU,oBAAoB,GAAGC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;EAEvC,oBACEC,cAAA,CAAAC,aAAA,CAACJ,IAAI,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACHd,IAAAA,SAAS,EAAEe,UAAU,CACnBC,MAAM,CAACpB,WAAW,EAClBoB,MAAM,CAAC,CAAA,UAAA,EAAad,SAAS,CAAA,CAAE,CAAC,EAChCc,MAAM,CAAC,CAAWb,QAAAA,EAAAA,OAAO,CAAE,CAAA,CAAC,EAC5Ba,MAAM,CAAC,CAAA,MAAA,EAASZ,KAAK,CAAA,CAAE,CAAC,EACxBJ,SACF,CAAE;AACFiB,IAAAA,GAAG,EAAEV,YAAa;IAClB,aAAY,EAAA,qBAAA;AAAqB,GAAA,EAC7BD,IAAI,CAAA,EAEPY,QAAQ,CAACC,GAAG,CAAClB,QAAQ,EAAE,CAACmB,OAAO,EAAEC,KAAK,KAAK;AAAA,IAAA,IAAAC,qBAAA,CAAA;AAC1C,IAAA,IAAI,eAACC,cAAc,CAACH,OAAO,CAAC,EAAE;AAC5B,MAAA,OAAOA,OAAO,CAAA;AAChB,KAAA;;AAEA;AACV;AACA;AACA;AACA;AACA;AACA;AACU,IAAA,IAAIX,oBAAoB,CAACe,OAAO,KAAK,CAAC,CAAC,EAAE;MACvCf,oBAAoB,CAACe,OAAO,GAAGH,KAAK,CAAA;AACtC,KAAA;IACA,oBAAOI,YAAY,CAACL,OAAO,EAAE;MAC3B,GAAGA,OAAO,CAACM,KAAK;MAChBxB,SAAS;MACTyB,YAAY,EAAA,CAAAL,qBAAA,GACVF,OAAO,CAACM,KAAK,CAACC,YAAY,MAAAL,IAAAA,IAAAA,qBAAA,cAAAA,qBAAA,GACzBD,KAAK,GAAGZ,oBAAoB,CAACe,OAAO,GAAGnB,OAAO,GAAG,CAAA;AACtD,KAAC,CAAC,CAAA;AACJ,GAAC,CACG,CAAC,CAAA;AAEX,CACF;;;;"}
+{"version":3,"file":"LegacyStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyStack/LegacyStack.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useRef,\n} from 'react'\n\nimport classNames from 'classnames'\n\n// eslint-disable-next-line no-restricted-imports\nimport { type LegacyStackItemProps } from '../LegacyStackItem'\n\nimport type LegacyStackProps from './LegacyStack.types'\n\nimport styles from './LegacyStack.module.scss'\n\n/**\n * @deprecated Use `Stack` instead.\n *\n * `Stack` provides an abstraction of **flex layout** so that\n * rendering of child elements **linearly** can be done\n * with simplified options.\n *\n * `Stack` always fills the parent element.\n *\n * Be reminded to list `StackItem`s to be direct child of `Stack`.\n * @example\n *\n * ```tsx\n * <Stack direction=\"horizontal\" spacing={8}>\n *  <StackItem>{ ... }</StackItem>\n *  <StackItem>{ ... }</StackItem>\n * </Stack>\n * ```\n */\nexport const LegacyStack = forwardRef<HTMLElement, LegacyStackProps>(\n  function Stack(\n    {\n      as = 'div',\n      className,\n      children,\n      direction,\n      justify = 'start',\n      align = 'stretch',\n      spacing = 0,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as\n    const firstValidElementIdx = useRef(-1)\n\n    return (\n      <Comp\n        className={classNames(\n          styles.LegacyStack,\n          styles[`direction-${direction}`],\n          styles[`justify-${justify}`],\n          styles[`align-${align}`],\n          className\n        )}\n        ref={forwardedRef}\n        data-testid=\"bezier-legacy-stack\"\n        {...rest}\n      >\n        {Children.map(children, (element, index) => {\n          if (!isValidElement(element)) {\n            return element\n          }\n\n          /**\n           * NOTE: this assumes that this element is `StackItem`.\n           *\n           * Even if the child is not a `StackItem` component,\n           * it could forward the prop to `StackItem` deeper in the tree,\n           * or implement a custom behavior compatible with `StackItemProps`.\n           */\n          if (firstValidElementIdx.current === -1) {\n            firstValidElementIdx.current = index\n          }\n          return cloneElement(element, {\n            ...(element.props ?? {}),\n            direction,\n            marginBefore:\n              (element.props as LegacyStackItemProps)?.marginBefore ??\n              (index > firstValidElementIdx.current ? spacing : 0),\n          } as LegacyStackItemProps)\n        })}\n      </Comp>\n    )\n  }\n)\n"],"names":["LegacyStack","forwardRef","Stack","as","className","children","direction","justify","align","spacing","rest","forwardedRef","Comp","firstValidElementIdx","useRef","_jsx","classNames","styles","ref","Children","map","element","index","_element$props","_marginBefore","_element$props2","isValidElement","current","cloneElement","props","marginBefore"],"mappings":";;;;;MAsCaA,WAAW,gBAAGC,UAAU,CACnC,SAASC,KAAKA,CACZ;AACEC,EAAAA,EAAE,GAAG,KAAK;EACVC,SAAS;EACTC,QAAQ;EACRC,SAAS;AACTC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,SAAS;AACjBC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGT,EAAE;AACf,EAAA,MAAMU,oBAAoB,GAAGC,MAAM,CAAC,CAAC,CAAC,CAAC;EAEvC,oBACEC,GAAA,CAACH,IAAI,EAAA;AACHR,IAAAA,SAAS,EAAEY,UAAU,CACnBC,MAAM,CAACjB,WAAW,EAClBiB,MAAM,CAAC,CAAA,UAAA,EAAaX,SAAS,CAAA,CAAE,CAAC,EAChCW,MAAM,CAAC,CAAWV,QAAAA,EAAAA,OAAO,CAAE,CAAA,CAAC,EAC5BU,MAAM,CAAC,CAAA,MAAA,EAAST,KAAK,CAAA,CAAE,CAAC,EACxBJ,SACF,CAAE;AACFc,IAAAA,GAAG,EAAEP,YAAa;AAClB,IAAA,aAAA,EAAY,qBAAqB;AAAA,IAAA,GAC7BD,IAAI;IAAAL,QAAA,EAEPc,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAE,CAACgB,OAAO,EAAEC,KAAK,KAAK;AAAA,MAAA,IAAAC,cAAA,EAAAC,aAAA,EAAAC,eAAA;AAC1C,MAAA,IAAI,eAACC,cAAc,CAACL,OAAO,CAAC,EAAE;AAC5B,QAAA,OAAOA,OAAO;AAChB;;AAEA;AACV;AACA;AACA;AACA;AACA;AACA;AACU,MAAA,IAAIR,oBAAoB,CAACc,OAAO,KAAK,CAAC,CAAC,EAAE;QACvCd,oBAAoB,CAACc,OAAO,GAAGL,KAAK;AACtC;MACA,oBAAOM,YAAY,CAACP,OAAO,EAAE;AAC3B,QAAA,IAAA,CAAAE,cAAA,GAAIF,OAAO,CAACQ,KAAK,MAAA,IAAA,IAAAN,cAAA,KAAA,KAAA,CAAA,GAAAA,cAAA,GAAI,EAAE,CAAC;QACxBjB,SAAS;QACTwB,YAAY,EAAA,CAAAN,aAAA,GAAA,CAAAC,eAAA,GACTJ,OAAO,CAACQ,KAAK,MAAA,IAAA,IAAAJ,eAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,eAAA,CAAyCK,YAAY,MAAAN,IAAAA,IAAAA,aAAA,KAAAA,KAAAA,CAAAA,GAAAA,aAAA,GACpDF,KAAK,GAAGT,oBAAoB,CAACc,OAAO,GAAGlB,OAAO,GAAG;AACtD,OAAyB,CAAC;KAC3B;AAAC,GACE,CAAC;AAEX,CACF;;;;"}

package/dist/esm/components/LegacyStack/LegacyStackItem/LegacyStackItem.mjs

@@ -1,7 +1,8 @@
-import React__default, { forwardRef } from 'react';
-import classNames from '../../../node_modules/classnames/index.mjs';
+import { forwardRef } from 'react';
+import classNames from '../../../_virtual/index.mjs';
 import { isNil, isInteger } from '../../../utils/type.mjs';
 import styles from './LegacyStackItem.module.scss.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 const sanitizeWeight = weight => {
   if (weight < 0) {
@@ -53,7 +54,7 @@ const LegacyStackItem = /*#__PURE__*/forwardRef(function StackItem({
   ...rest
 }, forwardedRef) {
   const Comp = as;
-  return /*#__PURE__*/React__default.createElement(Comp, Object.assign({
+  return /*#__PURE__*/jsx(Comp, {
     ref: forwardedRef,
     style: {
       ...style,
@@ -64,8 +65,10 @@ const LegacyStackItem = /*#__PURE__*/forwardRef(function StackItem({
       '--b-margin-after': `${marginAfter}px`
     },
     className: classNames(styles.LegacyStackItem, styles[`direction-${direction}`], styles[`justify-${justify}`], styles[`align-${align}`], className),
-    "data-testid": "bezier-legacy-stack-item"
-  }, rest), children);
+    "data-testid": "bezier-legacy-stack-item",
+    ...rest,
+    children: children
+  });
 });
 
 export { LegacyStackItem };

package/dist/esm/components/LegacyStack/LegacyStackItem/LegacyStackItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyStackItem.mjs","sources":["../../../../../src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isInteger, isNil } from '~/src/utils/type'\n\nimport type LegacyStackItemProps from './LegacyStackItem.types'\n\nimport styles from './LegacyStackItem.module.scss'\n\nconst sanitizeWeight = (weight: number): number => {\n  if (weight < 0) {\n    return 0\n  }\n  if (!isInteger(weight)) {\n    return 0\n  }\n  return weight\n}\n\n/**\n * @deprecated Use layout components(`Box`, `Stack`) that support flex item related properties (`shrink`, `grow`) instead.\n * @example\n *\n * ```\n * <Stack>\n *   <Stack grow={1} shrink={1} {...}>\n *     { ... }\n *   </Stack>\n *   <Box grow={0} shrink={0} {...} />\n * </Stack>\n * ```\n *\n *\n * `StackItem` is used along `Stack`.\n * It inherits the default settings from `Stack`,\n * but allows to override some props to customize the behavior\n * of particular item.\n *\n * If you are not using `StackItem` as the direct child of `Stack`,\n * be reminded to forward props in `StackItemProps` to `StackItem` component,\n * or manually implement the behavior compatible with `StackItem`.\n */\nexport const LegacyStackItem = forwardRef<HTMLElement, LegacyStackItemProps>(\n  function StackItem(\n    {\n      as = 'div',\n      children,\n      style,\n      className,\n      direction,\n      justify,\n      align,\n      size,\n      weight = 0,\n      grow = false,\n      shrink = false,\n      marginBefore = 0,\n      marginAfter = 0,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        style={{\n          ...style,\n          '--b-main-axis-size': isNil(size) ? 'initial' : `${size}px`,\n          '--b-grow-weight': grow ? sanitizeWeight(weight) : '0',\n          '--b-shrink-weight': shrink ? sanitizeWeight(weight) : '0',\n          '--b-margin-before': `${marginBefore}px`,\n          '--b-margin-after': `${marginAfter}px`,\n        }}\n        className={classNames(\n          styles.LegacyStackItem,\n          styles[`direction-${direction}`],\n          styles[`justify-${justify}`],\n          styles[`align-${align}`],\n          className\n        )}\n        data-testid=\"bezier-legacy-stack-item\"\n        {...rest}\n      >\n        {children}\n      </Comp>\n    )\n  }\n)\n"],"names":["sanitizeWeight","weight","isInteger","LegacyStackItem","forwardRef","StackItem","as","children","style","className","direction","justify","align","size","grow","shrink","marginBefore","marginAfter","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","isNil","classNames","styles"],"mappings":";;;;;AAYA,MAAMA,cAAc,GAAIC,MAAc,IAAa;EACjD,IAAIA,MAAM,GAAG,CAAC,EAAE;AACd,IAAA,OAAO,CAAC,CAAA;AACV,GAAA;AACA,EAAA,IAAI,CAACC,SAAS,CAACD,MAAM,CAAC,EAAE;AACtB,IAAA,OAAO,CAAC,CAAA;AACV,GAAA;AACA,EAAA,OAAOA,MAAM,CAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaE,eAAe,gBAAGC,UAAU,CACvC,SAASC,SAASA,CAChB;AACEC,EAAAA,EAAE,GAAG,KAAK;EACVC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,KAAK;EACLC,IAAI;AACJZ,EAAAA,MAAM,GAAG,CAAC;AACVa,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,CAAC;AAChBC,EAAAA,WAAW,GAAG,CAAC;EACf,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGd,EAAE,CAAA;EAEf,oBACEe,cAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBX,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGA,KAAK;MACR,oBAAoB,EAAEkB,KAAK,CAACb,IAAI,CAAC,GAAG,SAAS,GAAG,CAAGA,EAAAA,IAAI,CAAI,EAAA,CAAA;MAC3D,iBAAiB,EAAEC,IAAI,GAAGd,cAAc,CAACC,MAAM,CAAC,GAAG,GAAG;MACtD,mBAAmB,EAAEc,MAAM,GAAGf,cAAc,CAACC,MAAM,CAAC,GAAG,GAAG;MAC1D,mBAAmB,EAAE,CAAGe,EAAAA,YAAY,CAAI,EAAA,CAAA;MACxC,kBAAkB,EAAE,GAAGC,WAAW,CAAA,EAAA,CAAA;KAClC;AACFR,IAAAA,SAAS,EAAEkB,UAAU,CACnBC,MAAM,CAACzB,eAAe,EACtByB,MAAM,CAAC,CAAA,UAAA,EAAalB,SAAS,CAAA,CAAE,CAAC,EAChCkB,MAAM,CAAC,CAAWjB,QAAAA,EAAAA,OAAO,CAAE,CAAA,CAAC,EAC5BiB,MAAM,CAAC,CAAA,MAAA,EAAShB,KAAK,CAAA,CAAE,CAAC,EACxBH,SACF,CAAE;IACF,aAAY,EAAA,0BAAA;GACRS,EAAAA,IAAI,CAEPX,EAAAA,QACG,CAAC,CAAA;AAEX,CACF;;;;"}
+{"version":3,"file":"LegacyStackItem.mjs","sources":["../../../../../src/components/LegacyStack/LegacyStackItem/LegacyStackItem.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isInteger, isNil } from '~/src/utils/type'\n\nimport type LegacyStackItemProps from './LegacyStackItem.types'\n\nimport styles from './LegacyStackItem.module.scss'\n\nconst sanitizeWeight = (weight: number): number => {\n  if (weight < 0) {\n    return 0\n  }\n  if (!isInteger(weight)) {\n    return 0\n  }\n  return weight\n}\n\n/**\n * @deprecated Use layout components(`Box`, `Stack`) that support flex item related properties (`shrink`, `grow`) instead.\n * @example\n *\n * ```\n * <Stack>\n *   <Stack grow={1} shrink={1} {...}>\n *     { ... }\n *   </Stack>\n *   <Box grow={0} shrink={0} {...} />\n * </Stack>\n * ```\n *\n *\n * `StackItem` is used along `Stack`.\n * It inherits the default settings from `Stack`,\n * but allows to override some props to customize the behavior\n * of particular item.\n *\n * If you are not using `StackItem` as the direct child of `Stack`,\n * be reminded to forward props in `StackItemProps` to `StackItem` component,\n * or manually implement the behavior compatible with `StackItem`.\n */\nexport const LegacyStackItem = forwardRef<HTMLElement, LegacyStackItemProps>(\n  function StackItem(\n    {\n      as = 'div',\n      children,\n      style,\n      className,\n      direction,\n      justify,\n      align,\n      size,\n      weight = 0,\n      grow = false,\n      shrink = false,\n      marginBefore = 0,\n      marginAfter = 0,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        style={{\n          ...style,\n          '--b-main-axis-size': isNil(size) ? 'initial' : `${size}px`,\n          '--b-grow-weight': grow ? sanitizeWeight(weight) : '0',\n          '--b-shrink-weight': shrink ? sanitizeWeight(weight) : '0',\n          '--b-margin-before': `${marginBefore}px`,\n          '--b-margin-after': `${marginAfter}px`,\n        }}\n        className={classNames(\n          styles.LegacyStackItem,\n          styles[`direction-${direction}`],\n          styles[`justify-${justify}`],\n          styles[`align-${align}`],\n          className\n        )}\n        data-testid=\"bezier-legacy-stack-item\"\n        {...rest}\n      >\n        {children}\n      </Comp>\n    )\n  }\n)\n"],"names":["sanitizeWeight","weight","isInteger","LegacyStackItem","forwardRef","StackItem","as","children","style","className","direction","justify","align","size","grow","shrink","marginBefore","marginAfter","rest","forwardedRef","Comp","_jsx","ref","isNil","classNames","styles"],"mappings":";;;;;;AAYA,MAAMA,cAAc,GAAIC,MAAc,IAAa;EACjD,IAAIA,MAAM,GAAG,CAAC,EAAE;AACd,IAAA,OAAO,CAAC;AACV;AACA,EAAA,IAAI,CAACC,SAAS,CAACD,MAAM,CAAC,EAAE;AACtB,IAAA,OAAO,CAAC;AACV;AACA,EAAA,OAAOA,MAAM;AACf,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaE,eAAe,gBAAGC,UAAU,CACvC,SAASC,SAASA,CAChB;AACEC,EAAAA,EAAE,GAAG,KAAK;EACVC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,KAAK;EACLC,IAAI;AACJZ,EAAAA,MAAM,GAAG,CAAC;AACVa,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,CAAC;AAChBC,EAAAA,WAAW,GAAG,CAAC;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGd,EAAE;EAEf,oBACEe,GAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBX,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGA,KAAK;MACR,oBAAoB,EAAEe,KAAK,CAACV,IAAI,CAAC,GAAG,SAAS,GAAG,CAAGA,EAAAA,IAAI,CAAI,EAAA,CAAA;MAC3D,iBAAiB,EAAEC,IAAI,GAAGd,cAAc,CAACC,MAAM,CAAC,GAAG,GAAG;MACtD,mBAAmB,EAAEc,MAAM,GAAGf,cAAc,CAACC,MAAM,CAAC,GAAG,GAAG;MAC1D,mBAAmB,EAAE,CAAGe,EAAAA,YAAY,CAAI,EAAA,CAAA;MACxC,kBAAkB,EAAE,GAAGC,WAAW,CAAA,EAAA;KAClC;AACFR,IAAAA,SAAS,EAAEe,UAAU,CACnBC,MAAM,CAACtB,eAAe,EACtBsB,MAAM,CAAC,CAAA,UAAA,EAAaf,SAAS,CAAA,CAAE,CAAC,EAChCe,MAAM,CAAC,CAAWd,QAAAA,EAAAA,OAAO,CAAE,CAAA,CAAC,EAC5Bc,MAAM,CAAC,CAAA,MAAA,EAASb,KAAK,CAAA,CAAE,CAAC,EACxBH,SACF,CAAE;AACF,IAAA,aAAA,EAAY,0BAA0B;AAAA,IAAA,GAClCS,IAAI;AAAAX,IAAAA,QAAA,EAEPA;AAAQ,GACL,CAAC;AAEX,CACF;;;;"}

package/dist/esm/components/LegacyStack/LegacyVStack/LegacyVStack.mjs

@@ -1,4 +1,5 @@
-import React__default, { forwardRef } from 'react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { LegacyStack } from '../LegacyStack/LegacyStack.mjs';
 
 /**
@@ -7,10 +8,11 @@ import { LegacyStack } from '../LegacyStack/LegacyStack.mjs';
  * A container for vertical flex layout.
  */
 const LegacyVStack = /*#__PURE__*/forwardRef(function VStack(props, forwardedRef) {
-  return /*#__PURE__*/React__default.createElement(LegacyStack, Object.assign({
+  return /*#__PURE__*/jsx(LegacyStack, {
     ref: forwardedRef,
-    direction: "vertical"
-  }, props));
+    direction: "vertical",
+    ...props
+  });
 });
 
 export { LegacyVStack };

package/dist/esm/components/LegacyStack/LegacyVStack/LegacyVStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyVStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'\n\nimport type LegacyVStackProps from './LegacyVStack.types'\n\n/**\n * @deprecated Use `VStack` instead.\n *\n * A container for vertical flex layout.\n */\nexport const LegacyVStack = forwardRef<HTMLElement, LegacyVStackProps>(\n  function VStack(props, forwardedRef) {\n    return (\n      <LegacyStack\n        ref={forwardedRef}\n        direction=\"vertical\"\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacyVStack","forwardRef","VStack","props","forwardedRef","React","createElement","LegacyStack","Object","assign","ref","direction"],"mappings":";;;AAQA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,cAAA,CAAAC,aAAA,CAACC,WAAW,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACVC,IAAAA,GAAG,EAAEN,YAAa;AAClBO,IAAAA,SAAS,EAAC,UAAA;GACNR,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CACF;;;;"}
+{"version":3,"file":"LegacyVStack.mjs","sources":["../../../../../src/components/LegacyStack/LegacyVStack/LegacyVStack.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { LegacyStack } from '~/src/components/LegacyStack/LegacyStack'\n\nimport type LegacyVStackProps from './LegacyVStack.types'\n\n/**\n * @deprecated Use `VStack` instead.\n *\n * A container for vertical flex layout.\n */\nexport const LegacyVStack = forwardRef<HTMLElement, LegacyVStackProps>(\n  function VStack(props, forwardedRef) {\n    return (\n      <LegacyStack\n        ref={forwardedRef}\n        direction=\"vertical\"\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["LegacyVStack","forwardRef","VStack","props","forwardedRef","_jsx","LegacyStack","ref","direction"],"mappings":";;;;AAQA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,SAASC,MAAMA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACnC,oBACEC,GAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,SAAS,EAAC,UAAU;IAAA,GAChBL;AAAK,GACV,CAAC;AAEN,CACF;;;;"}