feat!: change package requirements

- Configure as ES module
- Add svelte as peerDependency
- add Vite and vite-preprocess to inline imported SCSS

.gitignore

@@ -1,5 +1,6 @@
-lib
+/lib
+/package
 node_modules
 .DS_Store
 .vscode
-.idea
+.idea

package.json

@@ -3,19 +3,14 @@
   "version": "0.72.1",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
-  "svelte": "./src/index.js",
+  "type": "module",
-  "main": "./lib/index.js",
-  "module": "./lib/index.mjs",
-  "types": "./types/index.d.ts",
-  "sideEffects": [
-    "css/*.css"
-  ],
   "scripts": {
     "test:types": "svelte-check --workspace tests",
     "lint": "prettier --write \"**/*.{svelte,md,js,json,ts}\"",
     "build:css": "node scripts/build-css",
     "build:docs": "node scripts/build-docs",
     "build:lib": "rollup -c",
+    "build:package": "svelte-package",
     "format": "prettier --write \"./**/*.{svelte,js,md}\"",
     "prepack": "yarn build:docs & yarn build:lib",
     "release": "standard-version && yarn prepack"
@@ -24,11 +19,14 @@
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
+    "@carbon/styles": "^1.20.0",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@sveltejs/package": "^1.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.8",
-    "carbon-components": "10.56.0",
+    "carbon-components": "^10.58.3",
     "carbon-icons-svelte": "^11.2.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
@@ -36,12 +34,17 @@
     "rollup": "^2.78.1",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.49.11",
+    "sass": "^1.53.0",
     "standard-version": "^9.5.0",
     "sveld": "^0.18.0",
-    "svelte": "^3.51.0",
+    "svelte": "^3.55.1",
     "svelte-check": "^2.8.1",
-    "typescript": "^4.7.4"
+    "svelte-preprocess": "^4.10.7",
+    "typescript": "^4.7.4",
+    "vite": "^4.0.4"
+  },
+  "peerDependencies": {
+    "svelte": "^3.55.1"
   },
   "standard-version": {
     "skip": {
@@ -66,9 +69,6 @@
     "carbon design system"
   ],
   "files": [
-    "lib",
-    "src",
-    "types",
     "css"
   ],
   "contributors": [

src/app.scss

@@ -0,0 +1 @@
+/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */

src/carbon-components-svelte/Breadcrumb/BreadcrumbItem.svelte

@@ -12,7 +12,7 @@
   /** Set to `true` if the breadcrumb item represents the current page */
   export let isCurrentPage = false;
 
-  import Link from "../Link/Link.svelte";
+  import Link from "../../Link/Link.svelte";
 
   import { setContext } from "svelte";
 

src/carbon-components-svelte/Button/Button.svelte

@@ -181,3 +181,7 @@
     />
   </button>
 {/if}
+
+<style lang="scss">
+  @use "@carbon/styles/scss/components/button";
+</style>

src/carbon-components-svelte/CodeSnippet/CodeSnippet.svelte

@@ -95,9 +95,9 @@
   export let ref = null;
 
   import { createEventDispatcher, tick, onMount } from "svelte";
-  import ChevronDown from "../icons/ChevronDown.svelte";
+  import ChevronDown from "../../icons/ChevronDown.svelte";
   import Button from "../Button/Button.svelte";
-  import CopyButton from "../CopyButton/CopyButton.svelte";
+  import CopyButton from "../../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   const dispatch = createEventDispatcher();

src/carbon-components-svelte/DataTable/DataTable.svelte

@@ -129,7 +129,7 @@
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
   import ChevronRight from "../icons/ChevronRight.svelte";
-  import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
+  import InlineCheckbox from "../carbon-components-svelte/Checkbox/InlineCheckbox.svelte";
   import RadioButton from "../RadioButton/RadioButton.svelte";
   import Table from "./Table.svelte";
   import TableBody from "./TableBody.svelte";

src/carbon-components-svelte/ImageLoader/ImageLoader.svelte

@@ -57,7 +57,7 @@
 
   import { onMount, createEventDispatcher } from "svelte";
   import { fade } from "svelte/transition";
-  import AspectRatio from "../AspectRatio/AspectRatio.svelte";
+  import AspectRatio from "../carbon-components-svelte/AspectRatio/AspectRatio.svelte";
 
   const dispatch = createEventDispatcher();