@spaced-out/ui-design-system 0.5.7-beta.3 → 0.5.7

package/.vscode/settings.json

@@ -33,5 +33,7 @@
   "javascript.validate.enable": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsserver.experimental.enableProjectDiagnostics": true
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifierEnding": "auto"
 }

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.7](https://github.com/spaced-out/ui-design-system/compare/v0.5.7-beta.0...v0.5.7) (2025-09-17)
+
+
+### Features
+
+* maxTabWidth prop in Tablist to support truncation in Tabs. ([#399](https://github.com/spaced-out/ui-design-system/issues/399)) ([76ffc8b](https://github.com/spaced-out/ui-design-system/commit/76ffc8b6fd1b21a84c9deec481b0e42b81825fa6))
+
+
+### Bug Fixes
+
+* fixes ts issues across leaves and several levels of parents ([#404](https://github.com/spaced-out/ui-design-system/issues/404)) ([7db6d7c](https://github.com/spaced-out/ui-design-system/commit/7db6d7ce01a36f9017c493821d4c30548a112565))
+
+### [0.5.7-beta.4](https://github.com/spaced-out/ui-design-system/compare/v0.5.7-beta.3...v0.5.7-beta.4) (2025-09-16)
+
+
+### Bug Fixes
+
+* updated build scripts ([a0485e1](https://github.com/spaced-out/ui-design-system/commit/a0485e17d68183c8614870869785ac2a58a1a463))
+
 ### [0.5.7-beta.3](https://github.com/spaced-out/ui-design-system/compare/v0.5.7-beta.2...v0.5.7-beta.3) (2025-09-16)
 
 

package/babel.config.js

@@ -11,10 +11,23 @@ module.exports = {
           'last 2 Edge versions',
           'last 3 iOS Major versions',
         ],
+        modules: 'commonjs',
+      },
+    ],
+    ['@babel/preset-react', {runtime: 'automatic'}],
+    ['@babel/preset-typescript', {onlyRemoveTypeImports: true}],
+  ],
+  plugins: [
+    'macros',
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        alias: {
+          src: './src',
+        },
+        extensions: ['.ts', '.tsx', '.js', '.jsx'],
       },
     ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
   ],
-  plugins: ['macros'],
 };

package/gulpfile.js

@@ -1,11 +1,7 @@
 const gulp = require('gulp');
 const babel = require('gulp-babel');
-const rename = require('gulp-rename');
-const replace = require('gulp-replace');
-
 const babelRc = require('./babel.config');
 
-
 const doNotBuildThese = [
   'src/__tests__/**',
   'src/**/*.test.ts',
@@ -15,28 +11,22 @@ const doNotBuildThese = [
 ];
 
 function getTsStream() {
-  return gulp.src('src/**/*.{ts,tsx}', {
-    ignore: doNotBuildThese,
-  });
+  return gulp.src('src/**/*.{ts,tsx}', {ignore: doNotBuildThese});
 }
 
 function buildCjs() {
-  return getTsStream()
-    .pipe(babel(babelRc))
-    .pipe(replace('.tsx', '.js'))
-    .pipe(replace('.ts', '.js'))
-    .pipe(gulp.dest('lib'));
+  return getTsStream().pipe(babel(babelRc)).pipe(gulp.dest('lib'));
 }
 
 function copyOther() {
   return gulp
-    .src('src/**/*', {
-      ignore: ['src/**/*.{ts,tsx}', ...doNotBuildThese],
-    })
+    .src([
+      'src/**/*',
+      '!src/**/*.{ts,tsx}',
+      ...doNotBuildThese.map((p) => '!' + p),
+    ])
     .pipe(gulp.dest('lib'));
 }
 
-
 const coreBuild = gulp.parallel(buildCjs, copyOther);
-
 module.exports.build = coreBuild;

package/lib/components/Accordion/Accordion.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Accordion = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _Toggle = require("src/components/Toggle");
-var _AccordionModule = _interopRequireDefault(require("src/components/Accordion/Accordion.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Toggle = require("../Toggle");
+var _AccordionModule = _interopRequireDefault(require("./Accordion.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -37,36 +38,41 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
   React.useEffect(() => {
     setAccordionIsOpen(isOpen);
   }, [isOpen]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     "data-testid": "Accordion",
-    className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
-    onClick: handleAccordionClick
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header)
-  }, showToggle && /*#__PURE__*/React.createElement("div", {
-    onClick: e => {
-      e.stopPropagation(); // prevent toggle click from triggering accordion toggle
-    }
-  }, /*#__PURE__*/React.createElement(_Toggle.Toggle, {
-    checked: checked,
-    onChange: handleToggle,
-    ariaLabel: 'toggle',
-    disabled: disabled
-  })), header), /*#__PURE__*/React.createElement(_Button.Button, {
-    iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
-    disabled: disabled,
-    size: "small",
-    type: "ghost",
-    classNames: {
-      wrapper: _AccordionModule.default.icon
-    },
-    ariaLabel: 'Collapse button'
-    // we are not defining onClick here as we are using onClick of the parent here.
-  })), accordionIsOpen && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content)
-  }, children));
+    className: (0, _classify.default)(_AccordionModule.default.wrapper, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_AccordionModule.default.headerWrapper, classNames?.headerWrapper),
+      onClick: handleAccordionClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classify.default)(_AccordionModule.default.header, classNames?.header),
+        children: [showToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: e => {
+            e.stopPropagation(); // prevent toggle click from triggering accordion toggle
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, {
+            checked: checked,
+            onChange: handleToggle,
+            ariaLabel: 'toggle',
+            disabled: disabled
+          })
+        }), header]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
+        disabled: disabled,
+        size: "small",
+        type: "ghost",
+        classNames: {
+          wrapper: _AccordionModule.default.icon
+        },
+        ariaLabel: 'Collapse button'
+        // we are not defining onClick here as we are using onClick of the parent here.
+      })]
+    }), accordionIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_AccordionModule.default.content, classNames?.content),
+      children: children
+    })]
+  });
 });
 Accordion.displayName = 'Accordion';

package/lib/components/Accordion/AccordionGroup.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AccordionGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _AccordionGroupModule = _interopRequireDefault(require("src/components/Accordion/AccordionGroup.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _AccordionGroupModule = _interopRequireDefault(require("./AccordionGroup.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AccordionGroup = _ref => {
@@ -48,9 +49,10 @@ const AccordionGroup = _ref => {
       key: childId
     });
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AccordionGroupModule.default.wrapper, classNames?.wrapper)
-  }, enhancedChildren);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_AccordionGroupModule.default.wrapper, classNames?.wrapper),
+    children: enhancedChildren
+  });
 };
 exports.AccordionGroup = AccordionGroup;
 AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/index.d.ts

@@ -1,3 +1,3 @@
-export * from 'src/components/Accordion/Accordion';
-export * from 'src/components/Accordion/AccordionGroup';
+export * from '../../components/Accordion/Accordion';
+export * from '../../components/Accordion/AccordionGroup';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Accordion/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Accordion = require("src/components/Accordion/Accordion");
+var _Accordion = require("./Accordion");
 Object.keys(_Accordion).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Accordion[key]) return;
@@ -14,7 +14,7 @@ Object.keys(_Accordion).forEach(function (key) {
     }
   });
 });
-var _AccordionGroup = require("src/components/Accordion/AccordionGroup");
+var _AccordionGroup = require("./AccordionGroup");
 Object.keys(_AccordionGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _AccordionGroup[key]) return;

package/lib/components/Avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type * as COLORS from 'src/styles/variables/_color';
-import type { IconType } from 'src/components/Icon';
-import type { StatusSemanticType } from 'src/components/StatusIndicator';
+import type * as COLORS from '../../styles/variables/_color';
+import type { IconType } from '../../components/Icon';
+import type { StatusSemanticType } from '../../components/StatusIndicator';
 type ClassNames = Readonly<{
     wrapper?: string;
     ring?: string;

package/lib/components/Avatar/Avatar.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _color = require("src/styles/variables/_color");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Icon = require("src/components/Icon");
-var _StatusIndicator = require("src/components/StatusIndicator");
-var _Text = require("src/components/Text");
-var _AvatarModule = _interopRequireDefault(require("src/components/Avatar/Avatar.module.css"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _StatusIndicator = require("../StatusIndicator");
+var _Text = require("../Text");
+var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AVATAR_SIZE = exports.AVATAR_SIZE = Object.freeze({
@@ -43,21 +44,25 @@ const AvatarTextDecorator = _ref => {
   } = _ref;
   switch (size) {
     case 'small':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
-        className: className
-      }, avatarText);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
+        className: className,
+        children: avatarText
+      });
     case 'medium':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
-        className: className
-      }, avatarText);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleMedium, {
+        className: className,
+        children: avatarText
+      });
     case 'large':
-      return /*#__PURE__*/React.createElement(_Text.SubTitleLarge, {
-        className: className
-      }, avatarText);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleLarge, {
+        className: className,
+        children: avatarText
+      });
     case 'extraLarge':
-      return /*#__PURE__*/React.createElement(_Text.JumboSmall, {
-        className: className
-      }, avatarText);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.JumboSmall, {
+        className: className,
+        children: avatarText
+      });
   }
 };
 
@@ -80,33 +85,35 @@ const AvatarConditionalContent = _ref2 => {
     statusBorderColorToken,
     classNames
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.default)(_AvatarModule.default.innerContainer, {
       [_AvatarModule.default.alignCenter]: !imageSrc
     }, classNames?.content),
     style: {
       '--background-color': AVATAR_COLOR[color]
-    }
-  }, !!status && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size])
-  }, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
-    status: status,
-    withBorder: true,
-    borderColorToken: statusBorderColorToken
-  })), imageSrc ? /*#__PURE__*/React.createElement("img", {
-    src: imageSrc,
-    alt: "Avatar",
-    className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
-  }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: iconName,
-    type: iconType,
-    size: iconSize[size],
-    className: classNames?.icon
-  }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
-    avatarText: getAvatarText(text),
-    size: size,
-    className: classNames?.text
-  }) : null);
+    },
+    children: [!!status && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusIndicator.StatusIndicator, {
+        status: status,
+        withBorder: true,
+        borderColorToken: statusBorderColorToken
+      })
+    }), imageSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: imageSrc,
+      alt: "Avatar",
+      className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
+    }) : iconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: iconName,
+      type: iconType,
+      size: iconSize[size],
+      className: classNames?.icon
+    }) : text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarTextDecorator, {
+      avatarText: getAvatarText(text),
+      size: size,
+      className: classNames?.text
+    }) : null]
+  });
 };
 const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
@@ -122,7 +129,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     status,
     statusBorderColorToken
   } = _ref3;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
       [_AvatarModule.default.extraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.largeSize]: size === 'large',
@@ -130,32 +137,35 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       [_AvatarModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper),
     style: style,
-    ref: ref
-  }, ring ? /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _AvatarModule.default.whiteCircle
-  }, /*#__PURE__*/React.createElement(AvatarConditionalContent, {
-    imageSrc: imageSrc,
-    text: text,
-    iconName: iconName,
-    iconType: iconType,
-    color: color,
-    size: size,
-    status: status,
-    statusBorderColorToken: statusBorderColorToken,
-    classNames: classNames
-  }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
-    imageSrc: imageSrc,
-    text: text,
-    iconName: iconName,
-    iconType: iconType,
-    color: color,
-    size: size,
-    status: status,
-    statusBorderColorToken: statusBorderColorToken,
-    classNames: classNames
-  }));
+    ref: ref,
+    children: ring ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_AvatarModule.default.ring, classNames?.ring),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _AvatarModule.default.whiteCircle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarConditionalContent, {
+          imageSrc: imageSrc,
+          text: text,
+          iconName: iconName,
+          iconType: iconType,
+          color: color,
+          size: size,
+          status: status,
+          statusBorderColorToken: statusBorderColorToken,
+          classNames: classNames
+        })
+      })
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarConditionalContent, {
+      imageSrc: imageSrc,
+      text: text,
+      iconName: iconName,
+      iconType: iconType,
+      color: color,
+      size: size,
+      status: status,
+      statusBorderColorToken: statusBorderColorToken,
+      classNames: classNames
+    })
+  });
 });
 const BaseAvatar = _ref4 => {
   let {
@@ -165,7 +175,7 @@ const BaseAvatar = _ref4 => {
     style,
     color = 'blue'
   } = _ref4;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
       [_AvatarModule.default.baseExtraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.baseLargeSize]: size === 'large',
@@ -175,11 +185,12 @@ const BaseAvatar = _ref4 => {
     style: {
       ...style,
       background: AVATAR_COLOR[color]
-    }
-  }, /*#__PURE__*/React.createElement(AvatarTextDecorator, {
-    avatarText: text,
-    size: size,
-    className: classNames?.text
-  }));
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarTextDecorator, {
+      avatarText: text,
+      size: size,
+      className: classNames?.text
+    })
+  });
 };
 exports.BaseAvatar = BaseAvatar;

package/lib/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/Avatar/Avatar';
+export * from '../../components/Avatar/Avatar';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Avatar/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Avatar = require("src/components/Avatar/Avatar");
+var _Avatar = require("./Avatar");
 Object.keys(_Avatar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Avatar[key]) return;

package/lib/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { AvatarSize } from 'src/components/Avatar';
-import type { ElevationType, PlacementType } from 'src/components/Tooltip';
+import type { AvatarSize } from '../../components/Avatar';
+import type { ElevationType, PlacementType } from '../../components/Tooltip';
 export interface AvatarGroupProps {
     children?: React.ReactNode;
     size?: AvatarSize;

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AvatarGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _color = require("src/styles/variables/_color");
-var _space = require("src/styles/variables/_space");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Avatar = require("src/components/Avatar");
-var _Tooltip = require("src/components/Tooltip");
-var _AvatarGroupModule = _interopRequireDefault(require("src/components/AvatarGroup/AvatarGroup.module.css"));
+var _color = require("../../styles/variables/_color");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Avatar = require("../Avatar");
+var _Tooltip = require("../Tooltip");
+var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
@@ -59,11 +60,12 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       },
       color
     });
-    return text ? /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+    return text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
       body: text,
       placement: placement,
-      elevation: tooltipElevation
-    }, avatar) : avatar;
+      elevation: tooltipElevation,
+      children: avatar
+    }) : avatar;
   };
   const childrenArray = React.Children.toArray(children);
   const totalAvatarCount = childrenArray.length;
@@ -84,28 +86,32 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
         }
       }
     }
-    const NameListNode = () => /*#__PURE__*/React.createElement("span", null, nameList.map(name => /*#__PURE__*/React.createElement(React.Fragment, {
-      key: name
-    }, name, /*#__PURE__*/React.createElement("br", null))));
-    return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-      body: /*#__PURE__*/React.createElement(NameListNode, null),
+    const NameListNode = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: nameList.map(name => /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [name, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {})]
+      }, name))
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+      body: /*#__PURE__*/(0, _jsxRuntime.jsx)(NameListNode, {}),
       bodyMaxLines: maxTooltipLines,
       placement: placement,
-      elevation: tooltipElevation
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _AvatarGroupModule.default.plusAvatar
-    }, /*#__PURE__*/React.createElement(_Avatar.BaseAvatar, {
-      size: size,
-      color: "gray",
-      text: `+${childAvatarCount - maxAvatars + 1}`,
-      classNames: {
-        wrapper: _AvatarGroupModule.default.avatarInGroup
-      },
-      style: {
-        borderColor,
-        marginLeft: `-${leftOverlap[size]}`
-      }
-    })));
+      elevation: tooltipElevation,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _AvatarGroupModule.default.plusAvatar,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.BaseAvatar, {
+          size: size,
+          color: "gray",
+          text: `+${childAvatarCount - maxAvatars + 1}`,
+          classNames: {
+            wrapper: _AvatarGroupModule.default.avatarInGroup
+          },
+          style: {
+            borderColor,
+            marginLeft: `-${leftOverlap[size]}`
+          }
+        })
+      })
+    });
   };
   const childrenWithProps = React.Children.map(children, (child, index) => {
     // Type guard to ensure child is a ReactElement
@@ -134,13 +140,14 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       }
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_AvatarGroupModule.default.avatarGroupContainer, {
       [_AvatarGroupModule.default.extraLargeSize]: size === 'extraLarge',
       [_AvatarGroupModule.default.largeSize]: size === 'large',
       [_AvatarGroupModule.default.mediumSize]: size === 'medium',
       [_AvatarGroupModule.default.smallSize]: size === 'small'
     }),
-    ref: ref
-  }, childrenWithProps);
+    ref: ref,
+    children: childrenWithProps
+  });
 });

package/lib/components/AvatarGroup/index.d.ts

@@ -1,2 +1,2 @@
-export * from 'src/components/AvatarGroup/AvatarGroup';
+export * from '../../components/AvatarGroup/AvatarGroup';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/AvatarGroup/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _AvatarGroup = require("src/components/AvatarGroup/AvatarGroup");
+var _AvatarGroup = require("./AvatarGroup");
 Object.keys(_AvatarGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _AvatarGroup[key]) return;

package/lib/components/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { IconSize, IconType } from 'src/components/Icon';
+import type { IconSize, IconType } from '../../components/Icon';
 type ClassNames = Readonly<{
     wrapper?: string;
     text?: string;