TS Upgrade & Dependency fixes

package.json

@@ -53,15 +53,15 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
-    "@vitest/ui": "^3.0.8",
+    "@vitest/ui": "^3.2.6",
     "gh-pages": "^6.2.0",
     "jsdom": "^26.0.0",
     "simple-scaffold": "^2.3.2",
     "storybook": "^8.6.17",
     "tsx": "^4.19.2",
-    "typescript": "^5.6.3",
+    "typescript": "^6.0.0",
     "vite-plugin-dts": "4.5.3",
-    "vitest": "^3.0.8"
+    "vitest": "^3.2.6"
   },
   "overrides": {
     "react-json-view-lite": "2.4.1"

packages/atomic-elements/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atomicjolt/atomic-elements
 
+## 3.7.2
+
+### Patch Changes
+
+- Upgrade styled-components to latest version
+
+## 3.7.1
+
+### Patch Changes
+
+- Upgrade to TS 6
+
 ## 3.7.0
 
 ### Minor Changes

packages/atomic-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atomicjolt/atomic-elements",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "sideEffects": false,
   "module": "dist/esm/index.js",
   "main": "dist/cjs/index.js",
@@ -57,7 +57,7 @@
     "classnames": "^2.3.1",
     "react-stately": "^3.34.0",
     "react-transition-group": "^4.4.5",
-    "styled-components": "6.1.15",
+    "styled-components": "6.4.2",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {

packages/atomic-elements/rollup.config.js

@@ -23,7 +23,7 @@ const formatEntryPoint = (format) => ({
     typescript({
       tsconfig: "./tsconfig.build.json",
       compilerOptions: {
-        baseUrl: "./",
+        rootDir: "./src",
         outDir: `dist/${format}`,
         declarationDir: `dist/${format}/types`,
         plugins: [

packages/atomic-elements/src/components/Animations/BouncingDots/__snapshots__/BouncingDots.spec.tsx.snap

@@ -3,23 +3,23 @@
 exports[`BouncingDots > snapshots > matches props snapshot 1`] = `
 <div>
   <div
-    class="sc-FEMpB kisnfQ aje-bouncing-dots custom-class is-small"
+    class="sc-bdDsCe iCuTFz aje-bouncing-dots custom-class is-small"
     style="color: red;"
   >
     <span
-      class="sc-gjcoXW jDAVOB aje-bouncing-dots__dot"
+      class="sc-gtcBCx kHHBzz aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW cDkKfS aje-bouncing-dots__dot"
+      class="sc-gtcBCx kTkLDs aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW gjANQY aje-bouncing-dots__dot"
+      class="sc-gtcBCx blzoIu aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW fXkSdv aje-bouncing-dots__dot"
+      class="sc-gtcBCx izOuBl aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW eIFvQr aje-bouncing-dots__dot"
+      class="sc-gtcBCx fvgAtJ aje-bouncing-dots__dot"
     />
   </div>
 </div>
@@ -28,16 +28,16 @@ exports[`BouncingDots > snapshots > matches props snapshot 1`] = `
 exports[`BouncingDots > snapshots > matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="sc-FEMpB GHmAc aje-bouncing-dots is-medium"
+    class="sc-bdDsCe eyNVMz aje-bouncing-dots is-medium"
   >
     <span
-      class="sc-gjcoXW jDAVOB aje-bouncing-dots__dot"
+      class="sc-gtcBCx kHHBzz aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW cDkKfS aje-bouncing-dots__dot"
+      class="sc-gtcBCx kTkLDs aje-bouncing-dots__dot"
     />
     <span
-      class="sc-gjcoXW gjANQY aje-bouncing-dots__dot"
+      class="sc-gtcBCx blzoIu aje-bouncing-dots__dot"
     />
   </div>
 </DocumentFragment>

packages/atomic-elements/src/components/Animations/Checkmark/__snapshots__/Checkmark.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Checkmark > should match snapshot 1`] = `
 <div>
   <span
-    class="sc-FEMpB ikyiYJ aje-checkmark is-medium"
+    class="sc-bdDsCe izVILC aje-checkmark is-medium"
     data-testid="checkmark"
   />
 </div>

packages/atomic-elements/src/components/Animations/Spinner/__snapshots__/Spinner.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Spinner > matches snapshot 1`] = `
   <svg
     aria-valuemax="100"
     aria-valuemin="0"
-    class="sc-fLDLck iBnMzL aje-progresscircle aje-spinner"
+    class="sc-hKVpXn fCZpCC aje-progresscircle aje-spinner"
     data-indeterminate="true"
     data-testid="spinner-svg"
     height="40px"
@@ -15,20 +15,20 @@ exports[`Spinner > matches snapshot 1`] = `
     width="40px"
   >
     <circle
-      class="sc-dVBluf fwCXlP"
+      class="sc-dkXsAU laHqZS"
       cx="22"
       cy="22"
       r="16"
     />
     <circle
-      class="sc-gjcoXW eNEMmL"
+      class="sc-gtcBCx ibbuFe"
       cx="22"
       cy="22"
       r="16"
       stroke-width="6"
     />
     <circle
-      class="sc-FEMpB cpSVbK"
+      class="sc-bdDsCe dygReb"
       cx="22"
       cy="22"
       r="16"

packages/atomic-elements/src/components/Banners/Banner/__snapshots__/Banner.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Banner > Banner.Button > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="sc-dycHyt bcORcL aje-btn aje-btn--inverted is-auto"
+        class="sc-eCQgVK achhC aje-btn aje-btn--inverted is-auto"
         tabindex="0"
         type="button"
       >
@@ -16,7 +16,7 @@ exports[`Banner > Banner.Button > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="sc-dycHyt bcORcL aje-btn aje-btn--inverted is-auto"
+      class="sc-eCQgVK achhC aje-btn aje-btn--inverted is-auto"
       tabindex="0"
       type="button"
     >
@@ -83,15 +83,15 @@ exports[`Banner > Banner.Content > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-gjcoXW OnqIU"
+        class="sc-gtcBCx hCHSt"
       >
         Content
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-gjcoXW OnqIU"
+      class="sc-gtcBCx hCHSt"
     >
       Content
     </div>
@@ -156,14 +156,14 @@ exports[`Banner > Banner.IconButton > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="sc-dycHyt sc-jbAkgO bcORcL duCePJ aje-btn aje-icon-btn aje-btn--banner is-medium"
+        class="sc-eCQgVK sc-jSppWd achhC gmYzfq aje-btn aje-icon-btn aje-btn--banner is-medium"
         data-icon-button="true"
         tabindex="0"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-fLDLck hYHdiZ aje-icon material-icons is-medium"
+          class="sc-hKVpXn eoBHob aje-icon material-icons is-medium"
         >
           more_vert
         </i>
@@ -172,14 +172,14 @@ exports[`Banner > Banner.IconButton > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="sc-dycHyt sc-jbAkgO bcORcL duCePJ aje-btn aje-icon-btn aje-btn--banner is-medium"
+      class="sc-eCQgVK sc-jSppWd achhC gmYzfq aje-btn aje-icon-btn aje-btn--banner is-medium"
       data-icon-button="true"
       tabindex="0"
       type="button"
     >
       <i
         aria-hidden="true"
-        class="sc-fLDLck hYHdiZ aje-icon material-icons is-medium"
+        class="sc-hKVpXn eoBHob aje-icon material-icons is-medium"
       >
         more_vert
       </i>
@@ -245,13 +245,13 @@ exports[`Banner > Snapshots > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-FEMpB eQljuX aje-banner aje-banner--info"
+        class="sc-bdDsCe jIeFyz aje-banner aje-banner--info"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-FEMpB eQljuX aje-banner aje-banner--info"
+      class="sc-bdDsCe jIeFyz aje-banner aje-banner--info"
     />
   </div>,
   "debug": [Function],
@@ -314,13 +314,13 @@ exports[`Banner > Snapshots > should match snapshot with variant 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-FEMpB eQljuX aje-banner aje-banner--success"
+        class="sc-bdDsCe jIeFyz aje-banner aje-banner--success"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-FEMpB eQljuX aje-banner aje-banner--success"
+      class="sc-bdDsCe jIeFyz aje-banner aje-banner--success"
     />
   </div>,
   "debug": [Function],