@knapsack/sandbox-components 4.66.3--canary.b1cd7eb.0 → 4.67.0--canary.4368.af45627.0

package/dist/react/divider.d.ts

@@ -1,6 +1,7 @@
 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;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAE1C,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;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"}

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 }) => {
-    return _jsx("hr", { className: clsx('divider', className) });
+export const Divider = ({ className, spacingBottom, }) => {
+    return (_jsx("hr", { className: clsx('divider', className, spacingBottom && `divider--spacingBottom--${spacingBottom}`) }));
 };
 //# 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;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"}
+{"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"}

package/dist/react/grid.d.ts

@@ -4,6 +4,7 @@ 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;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkBxC,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;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"}

package/dist/react/grid.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, }) => {
+export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, spacingBottom, }) => {
     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;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"}
+{"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"}

package/dist/react/index.d.ts

@@ -10,4 +10,5 @@ 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"}
+{"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"}

package/dist/react/index.js

@@ -10,4 +10,5 @@ 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"}
+{"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.66.3--canary.b1cd7eb.0",
+  "version": "4.67.0--canary.4368.af45627.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.3--canary.b1cd7eb.0",
-    "@knapsack/postcss-config-starter": "4.66.3--canary.b1cd7eb.0",
-    "@knapsack/prettier-config": "4.66.3--canary.b1cd7eb.0",
-    "@knapsack/sandbox-tokens": "4.66.3--canary.b1cd7eb.0",
-    "@knapsack/typescript-config-starter": "4.66.3--canary.b1cd7eb.0",
+    "@knapsack/eslint-config-starter": "4.67.0--canary.4368.af45627.0",
+    "@knapsack/postcss-config-starter": "4.67.0--canary.4368.af45627.0",
+    "@knapsack/prettier-config": "4.67.0--canary.4368.af45627.0",
+    "@knapsack/sandbox-tokens": "4.67.0--canary.4368.af45627.0",
+    "@knapsack/typescript-config-starter": "4.67.0--canary.4368.af45627.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": "b1cd7eb5337d013df565a505b93faceab6fdaffe"
+  "gitHead": "af456271627a758b3ef5792ace46a1a6ddd77db1"
 }

package/src/css/callout.css

@@ -0,0 +1,53 @@
+.callout {
+  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;
+  object-fit: contain;
+  margin-bottom: var(--spacing-xxlarge);
+}
+
+.callout-text-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 var(--spacing-medium);
+}
+
+@media (min-width: 768px) {
+  .callout-content {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .callout-image {
+    margin-bottom: 0;
+    margin-right: var(--spacing-large);
+  }
+
+  .callout-text-content {
+    align-items: flex-start;
+    padding: 0;
+  }
+
+  .callout-text {
+    text-align: left;
+  }
+}

package/src/css/divider.css

@@ -19,3 +19,30 @@
     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,6 +7,5 @@ body {
 }
 
 .demo-wrapper {
-  padding: var(--spacing-xlarge);
   align-items: center;
 }

package/src/css/grid.css

@@ -29,3 +29,30 @@
     }
   }
 }
+
+.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,4 +40,5 @@
 .hero-image {
   max-width: var(--breakpoint-xlarge);
   height: auto;
+  margin: auto;
 }

package/src/css/index.css

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