@knapsack/sandbox-components 4.54.6 → 4.54.7

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-# v4.54.6 (Thu May 16 2024)
+# v4.54.6 (Fri May 17 2024)
 
 #### 🐛 Bug Fix
 
@@ -7,13 +7,15 @@
 
 #### 🏠 Internal
 
+- update figma parsing logic to handle string props [#4049](https://github.com/knapsack-labs/app-monorepo/pull/4049) ([@mabry1985](https://github.com/mabry1985) [@EvanLovely](https://github.com/EvanLovely))
 - connect figma frames to prototype import [#4014](https://github.com/knapsack-labs/app-monorepo/pull/4014) ([@mabry1985](https://github.com/mabry1985))
 - adds api field for figma frames to get children data, sets up graphql pipeline [#4012](https://github.com/knapsack-labs/app-monorepo/pull/4012) ([@mabry1985](https://github.com/mabry1985))
 - Update dependency clsx to ^2.1.1 [#4082](https://github.com/knapsack-labs/app-monorepo/pull/4082) ([@renovate[bot]](https://github.com/renovate[bot]) [@greylabel](https://github.com/greylabel))
 
-#### Authors: 3
+#### Authors: 4
 
 - [@renovate[bot]](https://github.com/renovate[bot])
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
 - Grant Gaudet ([@greylabel](https://github.com/greylabel))
 - Josh Mabry ([@mabry1985](https://github.com/mabry1985))
 

package/dist/css/ks-sandbox-styles.css

@@ -1182,16 +1182,38 @@ body {
     }
 
 .card {
-  border: solid 1px '#ccc';
-  border: solid 1px var(--color-border, '#ccc');
+  border: solid 1px var(--color-border);
   border-radius: 0.5rem;
   border-radius: var(--border-radius, 0.5rem);
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  padding: 2rem;
+  min-width: 20rem;
+}
+
+.card > * {
+  margin-bottom: 1rem;
+}
+
+.card > header {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.card > .card-children {
+  display: flex;
+  flex-direction: column;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: 1rem;
 }
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
+  background-color: #d9d9d9;
+  padding: 5rem;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   grid-gap: 12px;
   grid-gap: var(--spacing-medium, 10px);
   gap: 12px;
@@ -1199,25 +1221,48 @@ body {
 }
 
 .grid--gap-small {
-      gap: 8px;
-      gap: var(--spacing-small, 5px);
-    }
+    gap: 8px;
+    gap: var(--spacing-small, 5px);
+  }
 
 .grid--gap-medium {
-      gap: 12px;
-      gap: var(--spacing-medium, 10px);
-    }
+    gap: 12px;
+    gap: var(--spacing-medium, 10px);
+  }
 
 .grid--gap-large {
-      gap: 16px;
-      gap: var(--spacing-large, 20px);
-    }
+    gap: 16px;
+    gap: var(--spacing-large, 20px);
+  }
+
+@media (max-width: 1200px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, 1fr);
+    padding: 2rem;
+  }
+}
 
 .hero {
   background-size: cover;
   background-position: 50%;
   background-repeat: no-repeat;
   height: 500px;
+  width: 100%;
 }
 
 .hover\:border-neutral-100:hover {

package/dist/react/card-base.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export declare const CardBase: React.VFC<{
-    title?: string;
-    imageSrc?: string;
-    footer?: React.ReactNode;
+    borderRadius: 'sm' | 'md' | 'lg' | 'xl';
+    heading?: string;
+    content?: string;
+    children?: React.ReactNode;
 }>;
 //# sourceMappingURL=card-base.d.ts.map

package/dist/react/card-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-base.d.ts","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAiBA,CAAC"}
+{"version":3,"file":"card-base.d.ts","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC;IAC/B,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CA0BA,CAAC"}

package/dist/react/card-base.js

@@ -1,8 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import clsx from 'clsx';
-export const CardBase = ({ footer, imageSrc, title }) => {
+export const CardBase = ({ borderRadius, children, content, heading }) => {
+    // border-radius: var(--border-radius, 0.5rem);
+    // set the css var for --border-radius using a switch on the sizes
+    useEffect(() => {
+        const root = document.documentElement;
+        const borderRadiusMap = {
+            sm: '0.5rem',
+            md: '0.75rem',
+            lg: '1rem',
+            xl: '1.5rem',
+        };
+        root.style.setProperty('--border-radius', borderRadiusMap[borderRadius]);
+    }, [borderRadius]);
     return (_jsxs("aside", { className: clsx({
             card: true,
-        }), children: [title && _jsx("header", { children: title }), imageSrc && _jsx("img", { src: imageSrc, alt: "Placeholder" }), footer && (_jsxs("details", { children: [_jsx("summary", { children: "Footer" }), footer] }))] }));
+            [`border-radius-${borderRadius}`]: borderRadius,
+        }), children: [heading && _jsx("header", { children: heading }), content && _jsx("p", { children: content }), _jsx("div", { className: "card-children", children: children })] }));
 };
 //# sourceMappingURL=card-base.js.map

package/dist/react/card-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-base.js","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAIhB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,OAAO,CACL,iBACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;SACX,CAAC,aAED,KAAK,IAAI,2BAAS,KAAK,GAAU,EACjC,QAAQ,IAAI,cAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,aAAa,GAAG,EACpD,MAAM,IAAI,CACT,8BACE,uCAAyB,EACxB,MAAM,IACC,CACX,IACK,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"card-base.js","sourceRoot":"","sources":["../../src/react/card-base.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAKhB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE;IACpD,+CAA+C;IAC/C,kEAAkE;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,eAAe,GAAG;YACtB,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,QAAQ;SACb,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACnB,OAAO,CACL,iBACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;YACV,CAAC,iBAAiB,YAAY,EAAE,CAAC,EAAE,YAAY;SAChD,CAAC,aAED,OAAO,IAAI,2BAAS,OAAO,GAAU,EACrC,OAAO,IAAI,sBAAI,OAAO,GAAK,EAC5B,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,IACzC,CACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/card-template-demo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from './card.js';
 import { Badge } from './badge.js';
-export const CardDemo1 = () => (_jsx(Card, { image: "wide", title: "Hello Card World!", footer: _jsxs("div", { children: [_jsx(Badge, { type: "primary", children: "4" }), " new messages"] }) }));
+export const CardDemo1 = () => (_jsx(Card, { heading: "Hello Card World!", content: "You are in a card", borderRadius: "lg", children: _jsxs("div", { children: [_jsx(Badge, { type: "primary", children: "4" }), " new messages"] }) }));
 //# sourceMappingURL=card-template-demo.js.map

package/dist/react/card-template-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-template-demo.js","sourceRoot":"","sources":["../../src/react/card-template-demo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,KAAC,IAAI,IACH,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,mBAAmB,EACzB,MAAM,EACJ,0BACE,KAAC,KAAK,IAAC,IAAI,EAAC,SAAS,kBAAU,qBAC3B,GAER,CACH,CAAC"}
+{"version":3,"file":"card-template-demo.js","sourceRoot":"","sources":["../../src/react/card-template-demo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,KAAC,IAAI,IACH,OAAO,EAAC,mBAAmB,EAC3B,OAAO,EAAC,mBAAmB,EAC3B,YAAY,EAAC,IAAI,YAEjB,0BACE,KAAC,KAAK,IAAC,IAAI,EAAC,SAAS,kBAAU,qBAC3B,GACD,CACR,CAAC"}

package/dist/react/card.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export declare const Card: React.VFC<{
-    title?: string;
-    image?: 'none' | 'wide' | 'tall';
-    footer?: React.ReactNode;
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl';
+    heading?: string;
+    content?: string;
+    children?: React.ReactNode;
 }>;
 //# sourceMappingURL=card.d.ts.map

package/dist/react/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAYA,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAMA,CAAC"}

package/dist/react/card.js

@@ -1,16 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardBase } from './card-base.js';
-export const Card = ({ footer, image = 'none', title }) => {
-    const imgUrl = (() => {
-        switch (image) {
-            case 'wide':
-                return 'https://knapsack.imgix.net/site/ks-sandbox/wide-rb9p92zdz3.png';
-            case 'tall':
-                return 'https://knapsack.imgix.net/site/ks-sandbox/tall-lllfl2y1nz.png';
-            case 'none':
-                return '';
-        }
-    })();
-    return _jsx(CardBase, { title: title, footer: footer, imageSrc: imgUrl });
+export const Card = ({ borderRadius, children, content, heading }) => {
+    return (_jsx(CardBase, { borderRadius: borderRadius, heading: heading, content: content, children: children }));
 };
 //# sourceMappingURL=card.js.map

package/dist/react/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAIZ,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IACzC,MAAM,MAAM,GAAW,CAAC,GAAG,EAAE;QAC3B,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,MAAM;gBACT,OAAO,gEAAgE,CAAC;YAC1E,KAAK,MAAM;gBACT,OAAO,gEAAgE,CAAC;YAC1E,KAAK,MAAM;gBACT,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IACL,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,CAAC;AACtE,CAAC,CAAC"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/react/card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAKZ,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE;IACpD,OAAO,CACL,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YACrE,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/hero.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface HeroProps {
+    height?: 'full' | 'short';
     title?: string;
     ctaLabel?: string;
     imageUrl?: string;

package/dist/react/hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAoDpC,CAAC"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,SAAS;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqDpC,CAAC"}

package/dist/react/hero.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 /**
  * @todo finish extracting tailwind classes out to a css file
  */
-export const Hero = ({ title = 'The most comprehensive & feature-rich Doodad UI Kit ever created', ctaLabel = 'See More', imageUrl = 'https://mdbcdn.b-cdn.net/img/new/slides/146.webp', }) => {
+export const Hero = ({ height = 'full', title = 'The most comprehensive & feature-rich Doodad UI Kit ever created', ctaLabel = 'See More', imageUrl = 'https://mdbcdn.b-cdn.net/img/new/slides/146.webp', }) => {
     return (_jsx("div", { className: clsx({
             hero: true,
         }), style: {

package/dist/react/hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,GAAG,kEAAkE,EAC1E,QAAQ,GAAG,UAAU,EACrB,QAAQ,GAAG,kDAAkD,GAC9D,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;SACX,CAAC,EACF,KAAK,EAAE;YACL,eAAe,EAAE,OAAO,QAAQ,GAAG;SACpC,YAED,cACE,SAAS,EAAE,IAAI,CAAC;gBACd,8FAA8F,EAC5F,IAAI,EAAE,kHAAkH;aAC3H,CAAC,YAEF,cACE,SAAS,EAAE,IAAI,CAAC;oBACd,yCAAyC,EAAE,IAAI,EAAE,oDAAoD;iBACtG,CAAC,YAEF,eACE,SAAS,EAAE,IAAI,CAAC;wBACd,sCAAsC,EAAE,IAAI,EAAE,iDAAiD;qBAChG,CAAC,aAEF,aACE,SAAS,EAAE,IAAI,CAAC;gCACd,sEAAsE,EACpE,IAAI,EAAE,iFAAiF;6BAC1F,CAAC,YAED,KAAK,GACH,EACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;gCACd,8XAA8X,EAC5X,IAAI,EAAE,yYAAyY;6BAClZ,CAAC,YAED,QAAQ,GACF,IACL,GACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"hero.js","sourceRoot":"","sources":["../../src/react/hero.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,kEAAkE,EAC1E,QAAQ,GAAG,UAAU,EACrB,QAAQ,GAAG,kDAAkD,GAC9D,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;SACX,CAAC,EACF,KAAK,EAAE;YACL,eAAe,EAAE,OAAO,QAAQ,GAAG;SACpC,YAED,cACE,SAAS,EAAE,IAAI,CAAC;gBACd,8FAA8F,EAC5F,IAAI,EAAE,kHAAkH;aAC3H,CAAC,YAEF,cACE,SAAS,EAAE,IAAI,CAAC;oBACd,yCAAyC,EAAE,IAAI,EAAE,oDAAoD;iBACtG,CAAC,YAEF,eACE,SAAS,EAAE,IAAI,CAAC;wBACd,sCAAsC,EAAE,IAAI,EAAE,iDAAiD;qBAChG,CAAC,aAEF,aACE,SAAS,EAAE,IAAI,CAAC;gCACd,sEAAsE,EACpE,IAAI,EAAE,iFAAiF;6BAC1F,CAAC,YAED,KAAK,GACH,EACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;gCACd,8XAA8X,EAC5X,IAAI,EAAE,yYAAyY;6BAClZ,CAAC,YAED,QAAQ,GACF,IACL,GACF,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.54.6",
+  "version": "4.54.7",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -37,11 +37,11 @@
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.54.6",
-    "@knapsack/postcss-config-starter": "4.54.6",
-    "@knapsack/prettier-config": "4.54.6",
-    "@knapsack/sandbox-tokens": "4.54.6",
-    "@knapsack/typescript-config-starter": "4.54.6",
+    "@knapsack/eslint-config-starter": "4.54.7",
+    "@knapsack/postcss-config-starter": "4.54.7",
+    "@knapsack/prettier-config": "4.54.7",
+    "@knapsack/sandbox-tokens": "4.54.7",
+    "@knapsack/typescript-config-starter": "4.54.7",
     "@types/node": "^20.11.30",
     "@types/react": "^18.0.27",
     "eslint": "^8.57.0",
@@ -59,5 +59,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "872138436de38416cee47cec57e564cb34b4d5d2"
+  "gitHead": "75cd936019982a0df372b3447c11cfdfed41edb1"
 }