@knapsack/sandbox-components 4.65.3 → 4.65.4--canary.4268.407e957.0

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

@@ -1264,7 +1264,6 @@ body {
   background: var(--background-content);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   box-shadow: var(--shadow-1);
-  min-width: 20rem;
   margin: 8px;
   margin: var(--spacing-small);
 }
@@ -1301,15 +1300,9 @@ body {
 
 .grid {
   display: grid;
-  background-color: #d9d9d9;
-  padding: 5rem;
-  padding: var(--spacing-scale-xl, 5rem);
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  grid-gap: 12px;
-  grid-gap: var(--spacing-medium, 10px);
-  gap: 12px;
-  gap: var(--spacing-medium, 10px);
+  grid-template-columns: 1fr;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .grid--gap-small {
@@ -1327,26 +1320,16 @@ body {
     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;
-  }
+@media (min-width: 768px) {
+    .grid--columns--2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .grid--columns--3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .grid--columns--4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
 }
 
 .header {

package/dist/react/grid.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 interface GridItemProps {
     children: React.ReactNode;
+    columns?: 1 | 2 | 3 | 4;
     gap?: 'small' | 'medium' | 'large';
+    maxWidth?: string;
 }
 export declare const Grid: React.FC<GridItemProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAWxC,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkBxC,CAAC"}

package/dist/react/grid.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-export const Grid = ({ children, gap = 'medium' }) => {
+export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, }) => {
     return (_jsx("div", { className: clsx({
             grid: true,
+            [`grid--columns--${columns}`]: columns,
             [`grid--gap-${gap}`]: gap,
-        }), children: children }));
+        }), style: { maxWidth }, children: children }));
 };
 //# sourceMappingURL=grid.js.map

package/dist/react/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,EAAE,QAAQ,EAAE,GAAG,GAAG,QAAQ,EAAE,EAAE,EAAE;IAC5E,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;YACV,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG;SAC1B,CAAC,YAED,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,QAAQ,EACd,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;YACV,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,OAAO;YACtC,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG;SAC1B,CAAC,EACF,KAAK,EAAE,EAAE,QAAQ,EAAE,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.65.3",
+  "version": "4.65.4--canary.4268.407e957.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -37,11 +37,11 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.65.3",
-    "@knapsack/postcss-config-starter": "4.65.3",
-    "@knapsack/prettier-config": "4.65.3",
-    "@knapsack/sandbox-tokens": "4.65.3",
-    "@knapsack/typescript-config-starter": "4.65.3",
+    "@knapsack/eslint-config-starter": "4.65.4--canary.4268.407e957.0",
+    "@knapsack/postcss-config-starter": "4.65.4--canary.4268.407e957.0",
+    "@knapsack/prettier-config": "4.65.4--canary.4268.407e957.0",
+    "@knapsack/sandbox-tokens": "4.65.4--canary.4268.407e957.0",
+    "@knapsack/typescript-config-starter": "4.65.4--canary.4268.407e957.0",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
@@ -59,5 +59,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "393fc7d65571d65c1c1438f3597964a2e0a9f9ec"
+  "gitHead": "407e9570237698534e52627eb1c38ebeb73e39b3"
 }

package/src/css/card.css

@@ -3,7 +3,6 @@
   border-radius: var(--radius-medium, 0.5rem);
   background: var(--background-content);
   box-shadow: var(--shadow-1);
-  min-width: 20rem;
   margin: var(--spacing-small);
 }
 

package/src/css/grid.css

@@ -1,10 +1,7 @@
 .grid {
   display: grid;
-  background-color: #d9d9d9;
-  padding: var(--spacing-scale-xl, 5rem);
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: var(--spacing-medium, 10px);
+  grid-template-columns: 1fr;
+  margin-inline: auto;
 }
 
 .grid--gap {
@@ -19,24 +16,16 @@
   }
 }
 
-@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;
+@media (min-width: 768px) {
+  .grid--columns {
+    &--2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    &--3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    &--4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 }

package/src/react/grid.tsx

@@ -3,16 +3,25 @@ import React from 'react';
 
 interface GridItemProps {
   children: React.ReactNode;
+  columns?: 1 | 2 | 3 | 4;
   gap?: 'small' | 'medium' | 'large';
+  maxWidth?: string;
 }
 
-export const Grid: React.FC<GridItemProps> = ({ children, gap = 'medium' }) => {
+export const Grid: React.FC<GridItemProps> = ({
+  children,
+  columns = 2,
+  gap = 'medium',
+  maxWidth,
+}) => {
   return (
     <div
       className={clsx({
         grid: true,
+        [`grid--columns--${columns}`]: columns,
         [`grid--gap-${gap}`]: gap,
       })}
+      style={{ maxWidth }}
     >
       {children}
     </div>