@knapsack/sandbox-components 4.75.2 → 4.75.3--canary.cda9f50.0

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

@@ -1932,17 +1932,21 @@ body {
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
+  gap: 16px;
+  gap: var(--spacing-large);
+}
+
+.callout-content--reverse {
+  flex-direction: column;
 }
 
 .callout-image {
   width: 100%;
-  height: auto;
   max-width: 100%;
+  height: auto;
   max-height: 400px;
   -o-object-fit: contain;
      object-fit: contain;
-  margin-bottom: 40px;
-  margin-bottom: var(--spacing-xxlarge);
 }
 
 .callout-text-content {
@@ -1952,19 +1956,30 @@ body {
   box-sizing: border-box;
   padding: 0 12px;
   padding: 0 var(--spacing-medium);
+  text-align: left;
+}
+
+.callout-text {
+  text-align: left;
 }
 
+/* Larger screens */
+
 @media (min-width: 768px) {
   .callout-content {
     flex-direction: row;
-    justify-content: center;
     align-items: center;
+    gap: 40px;
+    gap: var(--spacing-xxlarge);
+  }
+
+  .callout-content--reverse {
+    flex-direction: row-reverse;
   }
 
   .callout-image {
+    max-width: 40%;
     margin-bottom: 0;
-    margin-right: 16px;
-    margin-right: var(--spacing-large);
   }
 
   .callout-text-content {

package/dist/react/callout.d.ts

@@ -4,6 +4,7 @@ export type CalloutProps = {
     body: string;
     children: React.ReactNode;
     imageSrc: string;
+    imageAlignment?: 'left' | 'right';
 };
-export declare const Callout: ({ heading, body, children, imageSrc, }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Callout: ({ heading, body, children, imageSrc, imageAlignment, }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=callout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/react/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,OAAO,2CAKjB,YAAY,4CAkBd,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/react/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,OAAO,2DAMjB,YAAY,4CAsBd,CAAC"}

package/dist/react/callout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from './text.js';
-export const Callout = ({ heading, body, children, imageSrc, }) => {
-    return (_jsx("section", { className: "callout", children: _jsxs("div", { className: "callout-content", children: [_jsx("img", { className: "callout-image", src: imageSrc, alt: "Callout" }), _jsxs("div", { className: "callout-text-content", children: [_jsx(Text, { type: "headingLarge", spacingBottom: "medium", children: heading }), _jsx(Text, { type: "body", spacingBottom: "xlarge", children: body }), children] })] }) }));
+export const Callout = ({ heading, body, children, imageSrc, imageAlignment = 'left', }) => {
+    return (_jsx("section", { className: "callout", children: _jsxs("div", { className: `callout-content ${imageAlignment === 'right' ? 'callout-content--reverse' : ''}`, children: [_jsx("img", { className: "callout-image", src: imageSrc, alt: "Callout" }), _jsxs("div", { className: "callout-text-content", children: [_jsx(Text, { type: "headingLarge", spacingBottom: "medium", children: heading }), _jsx(Text, { type: "body", spacingBottom: "xlarge", children: body }), children] })] }) }));
 };
 //# sourceMappingURL=callout.js.map

package/dist/react/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/react/callout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AASjC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,GACK,EAAE,EAAE;IACjB,OAAO,CACL,kBAAS,SAAS,EAAC,SAAS,YAC1B,eAAK,SAAS,EAAC,iBAAiB,aAC9B,cAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,GAAG,EAC9D,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,aAAa,EAAC,QAAQ,YAC7C,OAAO,GACH,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,YACrC,IAAI,GACA,EAEN,QAAQ,IACL,IACF,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/react/callout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAUjC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,cAAc,GAAG,MAAM,GACV,EAAE,EAAE;IACjB,OAAO,CACL,kBAAS,SAAS,EAAC,SAAS,YAC1B,eACE,SAAS,EAAE,mBACT,cAAc,KAAK,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAC5D,EAAE,aAEF,cAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,GAAG,EAC9D,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,aAAa,EAAC,QAAQ,YAC7C,OAAO,GACH,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,YACrC,IAAI,GACA,EAEN,QAAQ,IACL,IACF,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.75.2",
+  "version": "4.75.3--canary.cda9f50.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -48,11 +48,11 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.75.2",
-    "@knapsack/postcss-config-starter": "4.75.2",
-    "@knapsack/prettier-config": "4.75.2",
-    "@knapsack/sandbox-tokens": "4.75.2",
-    "@knapsack/typescript-config-starter": "4.75.2",
+    "@knapsack/eslint-config-starter": "4.75.3--canary.cda9f50.0",
+    "@knapsack/postcss-config-starter": "4.75.3--canary.cda9f50.0",
+    "@knapsack/prettier-config": "4.75.3--canary.cda9f50.0",
+    "@knapsack/sandbox-tokens": "4.75.3--canary.cda9f50.0",
+    "@knapsack/typescript-config-starter": "4.75.3--canary.cda9f50.0",
     "@types/node": "^20.17.17",
     "@types/react": "^18.3.18",
     "esbuild": "^0.24.0",
@@ -72,5 +72,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "bf4e370563a958aaca1ab9e6257e9aacbfca33c2"
+  "gitHead": "cda9f505e28a99a25baabf8478b78066bc5a66e5"
 }

package/src/css/callout.css

@@ -11,15 +11,19 @@
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
+  gap: var(--spacing-large);
+}
+
+.callout-content--reverse {
+  flex-direction: column;
 }
 
 .callout-image {
   width: 100%;
-  height: auto;
   max-width: 100%;
+  height: auto;
   max-height: 400px;
   object-fit: contain;
-  margin-bottom: var(--spacing-xxlarge);
 }
 
 .callout-text-content {
@@ -28,18 +32,28 @@
   align-items: center;
   box-sizing: border-box;
   padding: 0 var(--spacing-medium);
+  text-align: left;
 }
 
+.callout-text {
+  text-align: left;
+}
+
+/* Larger screens */
 @media (min-width: 768px) {
   .callout-content {
     flex-direction: row;
-    justify-content: center;
     align-items: center;
+    gap: var(--spacing-xxlarge);
+  }
+
+  .callout-content--reverse {
+    flex-direction: row-reverse;
   }
 
   .callout-image {
+    max-width: 40%;
     margin-bottom: 0;
-    margin-right: var(--spacing-large);
   }
 
   .callout-text-content {

package/src/react/callout.tsx

@@ -6,6 +6,7 @@ export type CalloutProps = {
   body: string;
   children: React.ReactNode;
   imageSrc: string;
+  imageAlignment?: 'left' | 'right';
 };
 
 export const Callout = ({
@@ -13,10 +14,15 @@ export const Callout = ({
   body,
   children,
   imageSrc,
+  imageAlignment = 'left',
 }: CalloutProps) => {
   return (
     <section className="callout">
-      <div className="callout-content">
+      <div
+        className={`callout-content ${
+          imageAlignment === 'right' ? 'callout-content--reverse' : ''
+        }`}
+      >
         <img className="callout-image" src={imageSrc} alt="Callout" />
         <div className="callout-text-content">
           <Text type="headingLarge" spacingBottom="medium">