@knapsack/sandbox-components 4.66.1--canary.0e279e6.0 → 4.66.1--canary.4361.8d46f46.0

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

@@ -1158,6 +1158,8 @@ body {
 }
 
 .demo-wrapper {
+  padding: 24px;
+  padding: var(--spacing-xlarge);
   align-items: center;
 }
 
@@ -1330,45 +1332,6 @@ body {
     }
 }
 
-.grid--spacingBottom--none {
-    margin-bottom: 0;
-  }
-
-.grid--spacingBottom--xsmall {
-    margin-bottom: 4px;
-    margin-bottom: var(--spacing-xsmall);
-  }
-
-.grid--spacingBottom--small {
-    margin-bottom: 8px;
-    margin-bottom: var(--spacing-small);
-  }
-
-.grid--spacingBottom--medium {
-    margin-bottom: 12px;
-    margin-bottom: var(--spacing-medium);
-  }
-
-.grid--spacingBottom--large {
-    margin-bottom: 16px;
-    margin-bottom: var(--spacing-large);
-  }
-
-.grid--spacingBottom--xlarge {
-    margin-bottom: 24px;
-    margin-bottom: var(--spacing-xlarge);
-  }
-
-.grid--spacingBottom--xxlarge {
-    margin-bottom: 40px;
-    margin-bottom: var(--spacing-xxlarge);
-  }
-
-.grid--spacingBottom--xxxlarge {
-    margin-bottom: 64px;
-    margin-bottom: var(--spacing-xxxlarge);
-  }
-
 .header {
   background-color: #7a34ed;
   background-color: var(--brand-color);
@@ -1459,7 +1422,6 @@ body {
   max-width: 992px;
   max-width: var(--breakpoint-xlarge);
   height: auto;
-  margin: auto;
 }
 
 .divider {
@@ -1484,45 +1446,6 @@ body {
   );
 }
 
-.divider--spacingBottom--none {
-    margin-bottom: 0;
-  }
-
-.divider--spacingBottom--xsmall {
-    margin-bottom: 4px;
-    margin-bottom: var(--spacing-xsmall);
-  }
-
-.divider--spacingBottom--small {
-    margin-bottom: 8px;
-    margin-bottom: var(--spacing-small);
-  }
-
-.divider--spacingBottom--medium {
-    margin-bottom: 12px;
-    margin-bottom: var(--spacing-medium);
-  }
-
-.divider--spacingBottom--large {
-    margin-bottom: 16px;
-    margin-bottom: var(--spacing-large);
-  }
-
-.divider--spacingBottom--xlarge {
-    margin-bottom: 24px;
-    margin-bottom: var(--spacing-xlarge);
-  }
-
-.divider--spacingBottom--xxlarge {
-    margin-bottom: 40px;
-    margin-bottom: var(--spacing-xxlarge);
-  }
-
-.divider--spacingBottom--xxxlarge {
-    margin-bottom: 64px;
-    margin-bottom: var(--spacing-xxxlarge);
-  }
-
 .text {
   font-family: Inter;
   font-family: var(--brand-font-family);
@@ -1610,81 +1533,6 @@ body {
     margin-bottom: var(--spacing-xxxlarge);
   }
 
-.callout {
-  margin: 64px 0;
-  margin: var(--spacing-xxxlarge) 0;
-  text-align: center;
-}
-
-.callout-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
-.callout-image {
-  width: 100%;
-  height: auto;
-  max-width: 100%;
-  max-height: 400px;
-  -o-object-fit: contain;
-     object-fit: contain;
-  margin-bottom: 40px;
-  margin-bottom: var(--spacing-xxlarge);
-}
-
-.callout-text-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 12px;
-  padding: 0 var(--spacing-medium);
-}
-
-.callout-heading {
-  font-weight: 700;
-  font-size: 1.75rem;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  margin-bottom: var(--spacing-medium);
-}
-
-.callout-text {
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-bottom: var(--spacing-large);
-}
-
-@media (min-width: 768px) {
-  .callout-content {
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .callout-image {
-    margin-bottom: 0;
-    margin-right: 16px;
-    margin-right: var(--spacing-large);
-  }
-
-  .callout-text-content {
-    align-items: flex-start;
-    padding: 0;
-  }
-
-  .callout-text {
-    text-align: left;
-  }
-}
-
 .hover\:border-neutral-100:hover {
   --tw-border-opacity: 1;
   border-color: rgba(245, 245, 245, 1);

package/dist/react/divider.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export type DividerProps = {
     className?: string;
-    spacingBottom?: 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
 };
 export declare const Divider: React.FC<DividerProps>;
 //# sourceMappingURL=divider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAE1C,CAAC"}

package/dist/react/divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-export const Divider = ({ className, spacingBottom, }) => {
-    return (_jsx("hr", { className: clsx('divider', className, spacingBottom && `divider--spacingBottom--${spacingBottom}`) }));
+export const Divider = ({ className }) => {
+    return _jsx("hr", { className: clsx('divider', className) });
 };
 //# sourceMappingURL=divider.js.map

package/dist/react/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAexB,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,SAAS,EACT,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,aACE,SAAS,EAAE,IAAI,CACb,SAAS,EACT,SAAS,EACT,aAAa,IAAI,2BAA2B,aAAa,EAAE,CAC5D,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAMxB,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/D,OAAO,aAAI,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAI,CAAC;AACvD,CAAC,CAAC"}

package/dist/react/grid.d.ts

@@ -4,7 +4,6 @@ interface GridItemProps {
     columns?: 1 | 2 | 3 | 4;
     gap?: 'small' | 'medium' | 'large';
     maxWidth?: string;
-    spacingBottom?: 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
 }
 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,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;IAClB,aAAa,CAAC,EACV,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,CAAC;CAChB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoBxC,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,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, spacingBottom, }) => {
+export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, }) => {
     return (_jsx("div", { className: clsx({
             grid: true,
             [`grid--columns--${columns}`]: columns,
             [`grid--gap-${gap}`]: gap,
-            [`grid--spacingBottom--${spacingBottom}`]: spacingBottom,
         }), 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;AAmBxB,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,QAAQ,EACd,QAAQ,EACR,aAAa,GACd,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;YACzB,CAAC,wBAAwB,aAAa,EAAE,CAAC,EAAE,aAAa;SACzD,CAAC,EACF,KAAK,EAAE,EAAE,QAAQ,EAAE,YAElB,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/dist/react/index.d.ts

@@ -10,5 +10,4 @@ export * from './json-schema-playground.js';
 export * from './slot-references.js';
 export * from './starter-template.js';
 export * from './text.js';
-export * from './callout.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC"}

package/dist/react/index.js

@@ -10,5 +10,4 @@ export * from './json-schema-playground.js';
 export * from './slot-references.js';
 export * from './starter-template.js';
 export * from './text.js';
-export * from './callout.js';
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.66.1--canary.0e279e6.0",
+  "version": "4.66.1--canary.4361.8d46f46.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.66.1--canary.0e279e6.0",
-    "@knapsack/postcss-config-starter": "4.66.1--canary.0e279e6.0",
-    "@knapsack/prettier-config": "4.66.1--canary.0e279e6.0",
-    "@knapsack/sandbox-tokens": "4.66.1--canary.0e279e6.0",
-    "@knapsack/typescript-config-starter": "4.66.1--canary.0e279e6.0",
+    "@knapsack/eslint-config-starter": "4.66.1--canary.4361.8d46f46.0",
+    "@knapsack/postcss-config-starter": "4.66.1--canary.4361.8d46f46.0",
+    "@knapsack/prettier-config": "4.66.1--canary.4361.8d46f46.0",
+    "@knapsack/sandbox-tokens": "4.66.1--canary.4361.8d46f46.0",
+    "@knapsack/typescript-config-starter": "4.66.1--canary.4361.8d46f46.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": "0e279e6081c0dbefb0aa0574d6e38a629d56f8c4"
+  "gitHead": "8d46f467640593243542798aa9f744d3d2097d55"
 }

package/src/css/divider.css

@@ -19,30 +19,3 @@
     hsla(0, 0%, 0%, 0) 95%
   );
 }
-
-.divider--spacingBottom {
-  &--none {
-    margin-bottom: 0;
-  }
-  &--xsmall {
-    margin-bottom: var(--spacing-xsmall);
-  }
-  &--small {
-    margin-bottom: var(--spacing-small);
-  }
-  &--medium {
-    margin-bottom: var(--spacing-medium);
-  }
-  &--large {
-    margin-bottom: var(--spacing-large);
-  }
-  &--xlarge {
-    margin-bottom: var(--spacing-xlarge);
-  }
-  &--xxlarge {
-    margin-bottom: var(--spacing-xxlarge);
-  }
-  &--xxxlarge {
-    margin-bottom: var(--spacing-xxxlarge);
-  }
-}

package/src/css/global.css

@@ -7,5 +7,6 @@ body {
 }
 
 .demo-wrapper {
+  padding: var(--spacing-xlarge);
   align-items: center;
 }

package/src/css/grid.css

@@ -29,30 +29,3 @@
     }
   }
 }
-
-.grid--spacingBottom {
-  &--none {
-    margin-bottom: 0;
-  }
-  &--xsmall {
-    margin-bottom: var(--spacing-xsmall);
-  }
-  &--small {
-    margin-bottom: var(--spacing-small);
-  }
-  &--medium {
-    margin-bottom: var(--spacing-medium);
-  }
-  &--large {
-    margin-bottom: var(--spacing-large);
-  }
-  &--xlarge {
-    margin-bottom: var(--spacing-xlarge);
-  }
-  &--xxlarge {
-    margin-bottom: var(--spacing-xxlarge);
-  }
-  &--xxxlarge {
-    margin-bottom: var(--spacing-xxxlarge);
-  }
-}

package/src/css/hero.css

@@ -40,5 +40,4 @@
 .hero-image {
   max-width: var(--breakpoint-xlarge);
   height: auto;
-  margin: auto;
 }

package/src/css/index.css

@@ -10,4 +10,3 @@
 @import './hero.css';
 @import './divider.css';
 @import './text.css';
-@import './callout.css';

package/src/react/divider.tsx

@@ -3,28 +3,8 @@ import clsx from 'clsx';
 
 export type DividerProps = {
   className?: string;
-  spacingBottom?:
-    | 'none'
-    | 'xsmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'xlarge'
-    | 'xxlarge'
-    | 'xxxlarge';
 };
 
-export const Divider: React.FC<DividerProps> = ({
-  className,
-  spacingBottom,
-}) => {
-  return (
-    <hr
-      className={clsx(
-        'divider',
-        className,
-        spacingBottom && `divider--spacingBottom--${spacingBottom}`,
-      )}
-    />
-  );
+export const Divider: React.FC<DividerProps> = ({ className }) => {
+  return <hr className={clsx('divider', className)} />;
 };

package/src/react/grid.tsx

@@ -6,15 +6,6 @@ interface GridItemProps {
   columns?: 1 | 2 | 3 | 4;
   gap?: 'small' | 'medium' | 'large';
   maxWidth?: string;
-  spacingBottom?:
-    | 'none'
-    | 'xsmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'xlarge'
-    | 'xxlarge'
-    | 'xxxlarge';
 }
 
 export const Grid: React.FC<GridItemProps> = ({
@@ -22,7 +13,6 @@ export const Grid: React.FC<GridItemProps> = ({
   columns = 2,
   gap = 'medium',
   maxWidth,
-  spacingBottom,
 }) => {
   return (
     <div
@@ -30,7 +20,6 @@ export const Grid: React.FC<GridItemProps> = ({
         grid: true,
         [`grid--columns--${columns}`]: columns,
         [`grid--gap-${gap}`]: gap,
-        [`grid--spacingBottom--${spacingBottom}`]: spacingBottom,
       })}
       style={{ maxWidth }}
     >

package/src/react/index.tsx

@@ -10,4 +10,3 @@ export * from './json-schema-playground.js';
 export * from './slot-references.js';
 export * from './starter-template.js';
 export * from './text.js';
-export * from './callout.js';

package/dist/react/callout-image.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const CalloutImage: React.FC;
-//# sourceMappingURL=callout-image.d.ts.map

package/dist/react/callout-image.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"callout-image.d.ts","sourceRoot":"","sources":["../../src/react/callout-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAQhC,CAAC"}