@spaced-out/ui-design-system 0.4.14 → 0.4.15-beta.0

package/.cspell/custom-words.txt

@@ -139,3 +139,9 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
+codemod
+diwaker
+curre
+heapsnapshot
+typescriptify
+forwardref

package/.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
 
   features: {
     buildStoriesJson: true,
@@ -40,7 +40,7 @@ module.exports = {
         },
       ],
       '@babel/preset-react',
-      '@babel/preset-flow',
+      '@babel/preset-typescript',
     ],
     plugins: ['macros'],
   }),
@@ -61,22 +61,22 @@ module.exports = {
       include: path.resolve(__dirname, '../'),
     });
     config.module.rules.push({
-      test: /\.(js|jsx)$/,
+      test: /\.(ts|tsx)$/,
       loader: require.resolve('babel-loader'),
       options: {
         presets: [
           [
             'react-app',
             {
-              flow: true,
-              typescript: false,
+              flow: false,
+              typescript: true,
             },
           ],
         ],
       },
     });
 
-    config.resolve.extensions.push('.js', '.jsx');
+    config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },
 

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.4.15-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.14...v0.4.15-beta.0) (2025-08-13)
+
 ### [0.4.14](https://github.com/spaced-out/ui-design-system/compare/v0.4.13...v0.4.14) (2025-08-11)
 
 

package/babel.config.js

@@ -14,7 +14,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
-    '@babel/preset-flow',
+    '@babel/preset-typescript',
   ],
   plugins: ['macros'],
 };

package/config.js

@@ -12,7 +12,7 @@ const customJsFormat = ({dictionary, file}) =>
     .map((token, idx) => {
       let str = `export const ${token.name} = '${token.value}';\n`;
       if (!idx) {
-        const addStr = `// @flow strict\n\n`;
+        const addStr = '';
         str = addStr + str;
       }
       return str;
@@ -56,7 +56,7 @@ module.exports = {
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
       files: tokens.map((tokenCategory) => ({
-        destination: `_${tokenCategory}.js`,
+        destination: `_${tokenCategory}.ts`,
         format: `customJsFormat`,
         filter: {
           attributes: {
@@ -71,7 +71,7 @@ module.exports = {
       buildPath: `src/styles/`,
       files: [
         {
-          destination: `index.js`,
+          destination: `index.ts`,
           format: `customJsFormat`,
           filter: ({attributes}) => !attributes.category.includes('base'),
         },

package/cspell.json

@@ -12,7 +12,9 @@
     "README.md",
     "src/stories/INTRODUCTION.mdx",
     ".github/CODEOWNERS",
-    ".github/workflows/pull_request_semantics_checker.yml"
+    ".github/workflows/pull_request_semantics_checker.yml",
+    "tsconfig.tsbuildinfo",
+    "tsconfig.declaration.tsbuildinfo"
   ],
   // Enable your dictionary by adding it to the list of `dictionaries`
   "dictionaries": ["custom-words"],

package/eslint.config.mjs

@@ -0,0 +1,214 @@
+// ESLint 9 flat config for @spaced-out/ui-design-system
+// TypeScript-first config (Flow removed)
+
+import tseslint from 'typescript-eslint';
+import ftFlowPlugin from 'eslint-plugin-ft-flow';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import unusedImportsPlugin from 'eslint-plugin-unused-imports';
+import jestPlugin from 'eslint-plugin-jest';
+import storybookPlugin from 'eslint-plugin-storybook';
+import globals from 'globals';
+
+export default [
+  // Global ignores (replaces .eslintignore)
+  {
+    ignores: [
+      'node_modules/**',
+      'lib/**',
+      'dist/**',
+      'storybook-static/**',
+      'src/assets/fontawesome/**'
+    ],
+  },
+
+  // TypeScript rules for project source (non type-aware for now) //NOTE:(diwaker) make it type-aware later
+  // Bring in TS-ESLint recommended (no type checking) scoped to TS files
+  ...tseslint.configs.recommended.map((cfg) => ({
+    ...cfg,
+    files: ['src/**/*.{ts,tsx}'],
+    languageOptions: {
+      ...(cfg.languageOptions ?? {}),
+      parserOptions: {
+        ...(cfg.languageOptions?.parserOptions ?? {}),
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        Iterator: 'readonly',
+      },
+    },
+    settings: {
+      react: { version: 'detect' },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      // Keep Flow plugin loaded so legacy inline directives don't error
+      'ft-flow': ftFlowPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      import: importPlugin,
+      'simple-import-sort': simpleImportSortPlugin,
+      'unused-imports': unusedImportsPlugin,
+      jest: jestPlugin,
+      storybook: storybookPlugin,
+    },
+  })),
+
+  // Local project rule tweaks
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    rules: {
+      // Core
+      'arrow-body-style': ['warn', 'as-needed'],
+      curly: ['warn', 'all'],
+      'comma-spacing': ['warn', { before: false, after: true }],
+      'eol-last': 'warn',
+      eqeqeq: ['error', 'always', { null: 'ignore' }],
+      indent: 'off',
+      'max-params': ['warn', { max: 4 }],
+      'no-alert': 'warn',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'no-dupe-args': 'error',
+      'no-dupe-keys': 'error',
+      'no-duplicate-case': 'error',
+      // Allow TS overloads
+      'no-dupe-class-members': 'off',
+      'no-empty-function': 'warn',
+      'no-empty-pattern': 'error',
+      'no-eval': 'error',
+      'no-extend-native': 'error',
+      'no-extra-boolean-cast': 'error',
+      'no-fallthrough': 'error',
+      'no-floating-decimal': 'error',
+      'no-inner-declarations': 'error',
+      'no-loop-func': 'error',
+      'no-mixed-requires': 'off',
+      'no-nested-ternary': 'off',
+      'no-new-symbol': 'error',
+      'no-redeclare': 'off', // use TS rule
+      'no-restricted-globals': ['error', 'event', 'location'],
+      'no-sparse-arrays': 'error',
+      'no-tabs': 'warn',
+      'no-this-before-super': 'error',
+      'no-trailing-spaces': 'warn',
+      'no-underscore-dangle': 'off',
+      'no-unmodified-loop-condition': 'warn',
+      'no-undef': 'off', // TS handles this
+      'no-unreachable': 'warn',
+      'no-useless-constructor': 'off', // use TS rule
+      'no-var': 'error',
+      'no-with': 'error',
+      'object-shorthand': 'error',
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'warn',
+      'prefer-spread': 'warn',
+      quotes: ['warn', 'single', { allowTemplateLiterals: true }],
+      'require-yield': 'error',
+      'rest-spread-spacing': 'error',
+      strict: ['warn', 'never'],
+
+      // import
+      'import/newline-after-import': ['warn', { count: 2 }],
+      'import/no-duplicates': 'error',
+
+      // react
+      'react/jsx-no-undef': 'error',
+      'react/jsx-pascal-case': 'warn',
+      'react/jsx-uses-react': 'off',
+      'react/jsx-uses-vars': 'error',
+      'react/no-array-index-key': 'warn',
+      'react/no-deprecated': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/no-string-refs': 'warn',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+
+      // hooks //NOTE:(diwaker) temp keep as warn during migration; tighten later
+      'react-hooks/rules-of-hooks': 'warn',
+
+      // sorting
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+
+      // unused
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+
+      // TS-specific replacements (non type-aware)
+      '@typescript-eslint/no-redeclare': 'error',
+      '@typescript-eslint/no-useless-constructor': 'error',
+      '@typescript-eslint/consistent-type-imports': ['warn', { prefer: 'type-imports' }],
+      //NOTE:(diwaker) temp disable for migration fix this later
+      '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
+      '@typescript-eslint/no-unused-vars': ['warn', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-unused-expressions': ['warn', {
+        allowShortCircuit: false,
+        allowTaggedTemplates: false,
+        allowTernary: false
+      }],
+      '@typescript-eslint/no-this-alias': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/no-unnecessary-type-constraint': 'warn',
+    },
+  },
+
+  // Tests (JS/TS)
+  {
+    files: ['**/__tests__/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      globals: globals.jest,
+    },
+    plugins: {
+      jest: jestPlugin,
+    },
+  },
+
+  // Storybook specifics
+  {
+    files: ['**/*.stories.{jsx,tsx}'],
+    rules: {
+      semi: ['warn', 'always'],
+    },
+  },
+
+  // Project import sort groups (apply to JS and TS)
+  {
+    files: ['*.{js,jsx,ts,tsx}', '**/*.{js,jsx,ts,tsx}'],
+    rules: {
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^react', '^@?\\w'],
+            ['^(@|components)(/.*|$)'],
+            ['^\\u0000'],
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+            ['^.+\\.?(css)$'],
+          ],
+        },
+      ],
+    },
+  },
+];
+
+

package/gulpfile.js

@@ -2,8 +2,6 @@ const gulp = require('gulp');
 const babel = require('gulp-babel');
 const rename = require('gulp-rename');
 const replace = require('gulp-replace');
-const {spawnSync} = require('child_process');
-const path = require('path');
 
 const babelRc = require('./babel.config');
 
@@ -11,13 +9,13 @@ const babelRc = require('./babel.config');
 const doNotBuildThese = [
   'src/__tests__/**',
   'src/**/*.test.js',
-  'src/**/*.stories.jsx',
+  'src/**/*.stories.tsx',
   'src/**/*.stories.module.css',
   'src/stories/**',
 ];
 
 function getJsStream() {
-  return gulp.src('src/**/*.{js,jsx}', {
+  return gulp.src('src/**/*.{ts,tsx}', {
     ignore: doNotBuildThese,
   });
 }
@@ -25,47 +23,20 @@ function getJsStream() {
 function buildCjs() {
   return getJsStream()
     .pipe(babel(babelRc))
-    .pipe(replace('.jsx', '.js'))
-    .pipe(gulp.dest('lib'));
-}
-
-function copyFlow() {
-  return getJsStream()
-    .pipe(replace('.jsx', '.js'))
-    .pipe(
-      rename((path) => {
-        path.extname = path.extname.replace('jsx', 'js') + '.flow';
-      }),
-    )
+    .pipe(replace('.tsx', '.js'))
+    .pipe(replace('.ts', '.js'))
     .pipe(gulp.dest('lib'));
 }
 
 function copyOther() {
   return gulp
     .src('src/**/*', {
-      ignore: ['src/**/*.{js,jsx}', ...doNotBuildThese],
+      ignore: ['src/**/*.{ts,tsx}', ...doNotBuildThese],
     })
     .pipe(gulp.dest('lib'));
 }
 
-function generateDts(done) {
-  const result = spawnSync('yarn', ['generate'], {
-    stdio: 'inherit',
-    cwd: path.resolve(__dirname, 'dts-generator'),
-    shell: true,
-  });
-
-  if (result.status !== 0) {
-    return done(new Error('Failed to generate .d.ts files'));
-  }
-
-  done();
-}
-
-const coreBuild = gulp.parallel(buildCjs, copyFlow, copyOther);
 
-// Note(Nishant): To unblock flow to ts migration
-// const fullBuild = gulp.series(coreBuild, generateDts);
+const coreBuild = gulp.parallel(buildCjs, copyOther);
 
 module.exports.build = coreBuild;
-// module.exports.build = fullBuild;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+export type AccordionClassNames = Readonly<{
+    wrapper?: string;
+    headerWrapper?: string;
+    header?: string;
+    content?: string;
+}>;
+export type AccordionPropsType = {
+    id: string;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    classNames?: AccordionClassNames;
+    isOpen?: boolean;
+    disabled?: boolean;
+    showToggle?: boolean;
+    onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;
+    onToggle?: ((id?: string, checked?: boolean) => unknown) | null | undefined;
+};
+export declare const Accordion: Flow.AbstractComponent<AccordionPropsType, HTMLDivElement>;
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC7E,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,cAAc,CA+E/E,CAAC"}

package/lib/components/Accordion/Accordion.js

@@ -59,7 +59,9 @@ const Accordion = exports.Accordion = /*#__PURE__*/React.forwardRef((_ref, ref)
     iconLeftName: accordionIsOpen ? 'chevron-up' : 'chevron-down',
     disabled: disabled,
     size: "small",
-    type: "ghost",
+    type: "ghost"
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
     className: _AccordionModule.default.icon,
     ariaLabel: 'Collapse button'
     // we are not defining onClick here as we are using onClick of the parent here.

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type AccordionGroupClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type AccordionGroupPropsType = {
+    children: React.ReactNode;
+    onAccordionClick?: (id: string, isOpen: boolean) => unknown;
+    onToggle?: (id: string, checked?: boolean) => unknown;
+    enabledToggleIds?: Array<string>;
+    initialOpenId?: string;
+    classNames?: AccordionGroupClassNames;
+};
+export declare const AccordionGroup: {
+    ({ children, onAccordionClick, onToggle, enabledToggleIds, initialOpenId, classNames, }: AccordionGroupPropsType): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=AccordionGroup.d.ts.map

package/lib/components/Accordion/AccordionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,wBAAwB,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,cAAc;6FAQtB,uBAAuB;;CA8C3B,CAAC"}

package/lib/components/Accordion/AccordionGroup.js

@@ -33,10 +33,13 @@ const AccordionGroup = _ref => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
+
+    // @ts-ignore - TS2571 - Object is of type 'unknown'.
     const childId = child.props.id;
     const isDisabled = !checks.includes(childId);
     const isOpen = openId === childId;
     return /*#__PURE__*/React.cloneElement(child, {
+      // @ts-ignore - TS2769 - No overload matches this call.
       classNames: {
         headerWrapper: _AccordionGroupModule.default.accordionHeaderWrapper,
         wrapper: _AccordionGroupModule.default.accordionWrapper

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type * as COLORS from '../../styles/variables/_color';
+import type { IconType } from '../Icon';
+import type { StatusSemanticType } from '../StatusIndicator';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    ring?: string;
+    content?: string;
+    image?: string;
+    icon?: string;
+    text?: string;
+}>;
+export declare const AVATAR_SIZE: Readonly<{
+    small: "small";
+    medium: "medium";
+    large: "large";
+    extraLarge: "extraLarge";
+}>;
+export declare const avatarSizeOptions: Array<unknown>;
+export type AvatarSize = typeof AVATAR_SIZE[keyof typeof AVATAR_SIZE];
+export declare const AVATAR_COLOR: Readonly<{
+    red: "#fce8ed";
+    orange: "#fcf2e7";
+    green: "#e6f5ed";
+    blue: "#e6f0fe";
+    gray: "#EBEBEB";
+    indigo: "#f1f1f5";
+}>;
+export type AvatarColorType = keyof typeof AVATAR_COLOR;
+export type AvatarProps = {
+    classNames?: ClassNames;
+    size?: AvatarSize;
+    imageSrc?: string;
+    ring?: boolean;
+    icon?: boolean;
+    text?: string;
+    color?: AvatarColorType;
+    style?: unknown;
+    iconName?: string;
+    iconType?: IconType;
+    status?: StatusSemanticType;
+    statusBorderColorToken?: keyof typeof COLORS;
+};
+export type AvatarContentProps = {
+    imageSrc?: string;
+    text?: string;
+    iconName?: string;
+    iconType?: IconType;
+    size: AvatarSize;
+    color?: AvatarColorType;
+    ring?: boolean;
+    status?: StatusSemanticType;
+    statusBorderColorToken?: keyof typeof COLORS;
+    classNames?: ClassNames;
+};
+export declare const Avatar: Flow.AbstractComponent<AvatarProps, HTMLDivElement>;
+export declare const BaseAvatar: ({ classNames, size, text, style, color, }: AvatarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAQrD,OAAO,KAAK,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAU7D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,oBAAoB,CAAC;AAM3D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAiC,CAAC;AAE/E,MAAM,MAAM,UAAU,GAAG,OAAO,WAAW,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACtE,eAAO,MAAM,YAAY;;;;;;;EAOvB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC9C,CAAC;AAwCF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AA0DF,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CA8DnE,CAAC;AAEL,eAAO,MAAM,UAAU,GACrB,2CAMG,WAAW,sBAqBT,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Text = require("../../components/Text");
-var _color = _interopRequireWildcard(require("../../styles/variables/_color"));
-var COLORS = _color;
+var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _StatusIndicator = require("../StatusIndicator");
@@ -100,10 +99,15 @@ const AvatarConditionalContent = _ref2 => {
     className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
   }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    type: iconType,
+    type: iconType
+    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ small: string; medium: string; large: string; extraLarge: string; }>'.
+    ,
     size: iconSize[size],
     className: classNames?.icon
-  }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
+  }) : text ?
+  /*#__PURE__*/
+  // @ts-ignore - TS2786 - 'AvatarTextDecorator' cannot be used as a JSX component.
+  React.createElement(AvatarTextDecorator, {
     avatarText: getAvatarText(text),
     size: size,
     className: classNames?.text
@@ -129,7 +133,9 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       [_AvatarModule.default.largeSize]: size === 'large',
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
-    }, classNames?.wrapper),
+    }, classNames?.wrapper)
+    // @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'CSSProperties | undefined'.
+    ,
     style: style,
     ref: ref
   }, ring ? /*#__PURE__*/React.createElement("div", {
@@ -172,7 +178,9 @@ const BaseAvatar = _ref4 => {
       [_AvatarModule.default.baseLargeSize]: size === 'large',
       [_AvatarModule.default.baseMediumSize]: size === 'medium',
       [_AvatarModule.default.baseSmallSize]: size === 'small'
-    }, classNames?.wrapper),
+    }, classNames?.wrapper)
+    // @ts-ignore - TS2698 - Spread types may only be created from object types.
+    ,
     style: {
       ...style,
       background: AVATAR_COLOR[color]

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { AvatarSize } from '../Avatar';
+import type { ElevationType, PlacementType } from '../Tooltip';
+export type AvatarGroupProps = {
+    children?: React.ReactNode;
+    size?: AvatarSize;
+    borderColor?: string;
+    maxTooltipLines?: number;
+    placement?: PlacementType;
+    maxAvatars?: number;
+    tooltipElevation?: ElevationType;
+};
+export declare const AvatarGroup: Flow.AbstractComponent<AvatarGroupProps, HTMLDivElement>;
+//# sourceMappingURL=AvatarGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AASrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,YAAY,CAAC;AAQ7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,EAAE,cAAc,CAoI/E,CAAC"}