[HELP] ES imports not working in prerelease.29

When trying I go to build my StyleDictionary module with Vite, I keep running into this error.

 nx run token-adaptor:build:dev

libs/token-adaptor/src/index.ts:42:42 - error TS2339: Property 'extend' does not exist on type 'typeof StyleDictionary'.

  40 |   }
  41 | 
> 42 | const StyleOutput = StyleDictionary.extend(StyleDictionaryConfig,
     |                                          ^
  43 |   {
  44 |     mutateOriginal: true,
  45 |     verbosity: 'verbose',

Found 1 error.

 NX   Found type errors. See above.

However, this is how I am importing.

import StyleDictionary from 'style-dictionary' and no TS errors registerTransforms(StyleDictionary); and no TS errors

However when it gets the extend method on the StyleDictionary object, I receive the following error.

Property 'extend' does not exist on type 'typeof StyleDictionary'.ts(2339)

I am failing to understand why this is the case.

Here's my dynamic Style-Dictionary Config

// index.ts
import StyleDictionary from 'style-dictionary'
import { Config } from 'style-dictionary/types';
import { registerTransforms } from '@tokens-studio/sd-transforms';

registerTransforms(StyleDictionary);

const StyleDictionaryConfig: Config = {
    source: ['libs/token-adaptor/tokens/**/*.json'],
    preprocessors: ["tokens-studio"],
    platforms: {
      "css": {
        "transformGroup": "tokens-studio",
        "buildPath": "dist/css",
        "files": [
          {
            "destination": "variables.css",
            "format": "css/variables",
            "options": {
              "outputReferences": true
            }
          }
        ]
      },
      "js": {
        "transformGroup": "tokens-studio",
        "buildPath": "dist/js/",
        "files": [
          {
            "destination": "variables.js",
            "format": "javascript/es6",
            "options": {
                "outputReferences": true
              }
          }
        ]
      }
    }
  }

const StyleOutput = StyleDictionary.extend(StyleDictionaryConfig,
  {
    mutateOriginal: true,
    verbosity: 'verbose',
    warnings: 'error'
  })

StyleOutput.cleanAllPlatforms();
StyleOutput.buildAllPlatforms();

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';
import baseConfig from '../../vite.base.config';

export default defineConfig({
    ...baseConfig,
    build: {
      lib: {
        entry: resolve(__dirname, 'src/index.ts'),
        name: 'UI-Variables',
        fileName: '_variables',
        formats: ['es', 'cjs'],
      },
      rollupOptions: {
        external: [],
        output: {
          globals: {},
        },
      },
    },
    plugins: [],
    optimizeDeps: {
      include: ['src/**/*.ts'],
        exclude: ['style-dictionary'],
    },
  });

// tsconfig.json
{
  "compilerOptions": {
      "outDir": "out",
      "skipLibCheck": true,
      "moduleResolution": "Bundler",
      "module": "ESNext",
      "sourceMap": true,
      "target": "ES2017",
      "noEmit": true,
      "allowImportingTsExtensions": true
  },
  "watchOptions": {
      "watchFile": "useFsEvents",
      "watchDirectory": "useFsEvents",
      "synchronousWatchDirectory": true,
      "excludeDirectories": ["dist"],
      "excludeFiles": ["tsconfig.json"]
  },
}

I feel like I am overlooking something simple, but not sure what. Thanks in advance!

amzn / style-dictionary

[HELP] ES imports not working in prerelease.29 #1212