@useblu/ocean-react 1.31.0 → 1.32.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.32.0](https://github.com/ocean-ds/ocean-web/compare/v1.31.4...v1.32.0) (2022-06-30)
+
+### Features
+
+- add cross sell card component ([#980](https://github.com/ocean-ds/ocean-web/issues/980)) ([6177870](https://github.com/ocean-ds/ocean-web/commit/61778709e2ac7d6f0f9daafce2f2888f09d84ccf))
+
+## [1.31.4](https://github.com/ocean-ds/ocean-web/compare/v1.31.3...v1.31.4) (2022-06-28)
+
+**Note:** Version bump only for package @useblu/ocean-react
+
+## [1.31.1](https://github.com/ocean-ds/ocean-web/compare/v1.31.0...v1.31.1) (2022-05-17)
+
+**Note:** Version bump only for package @useblu/ocean-react
+
 # [1.31.0](https://github.com/ocean-ds/ocean-web/compare/v1.30.4...v1.31.0) (2022-04-06)
 
 ### Features

package/CrossSellCard/CrossSellCard.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type CrossSellCardProps = {
+    title: string;
+    description: string;
+    imageSrc?: string;
+    ctaText: string;
+    ctaAction: () => void;
+} & React.ComponentPropsWithoutRef<'div'>;
+declare const CrossSellCard: React.ForwardRefExoticComponent<{
+    title: string;
+    description: string;
+    imageSrc?: string | undefined;
+    ctaText: string;
+    ctaAction: () => void;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default CrossSellCard;
+//# sourceMappingURL=CrossSellCard.d.ts.map

package/CrossSellCard/CrossSellCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossSellCard.d.ts","sourceRoot":"","sources":["../../src/CrossSellCard/CrossSellCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,kBAAkB,GAAG;IAI/B,KAAK,EAAE,MAAM,CAAC;IAId,WAAW,EAAE,MAAM,CAAC;IAIpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAIlB,OAAO,EAAE,MAAM,CAAC;IAIhB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,aAAa;WAnBV,MAAM;iBAIA,MAAM;;aAQV,MAAM;eAIJ,MAAM,IAAI;kLAsCtB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/CrossSellCard/__tests__/CrossSellCard.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CrossSellCard.d.ts.map

package/CrossSellCard/__tests__/CrossSellCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossSellCard.d.ts","sourceRoot":"","sources":["../../../src/CrossSellCard/__tests__/CrossSellCard.tsx"],"names":[],"mappings":""}

package/CrossSellCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CrossSellCard';
+//# sourceMappingURL=index.d.ts.map

package/CrossSellCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CrossSellCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/Steps/Steps.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 export interface StepsProps {
-    currentStep: 1 | 2 | 3 | 4;
-    steps: 2 | 3 | 4;
+    currentStep: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+    steps: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 }
 declare const defaultProps: {
     currentStep: number;

package/Steps/Steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../src/Steps/Steps.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAU;IAKzB,WAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAM3B,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClB;AACD,QAAA,MAAM,YAAY;;;CAGjB,CAAC;AAqBF,QAAA,MAAM,KAAK,4BAGR,UAAU,GAAG,mBAAmB,KAAG,YAuLrC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../src/Steps/Steps.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAU;IAKzB,WAAW,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAMpD,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAC3C;AACD,QAAA,MAAM,YAAY;;;CAGjB,CAAC;AAEF,QAAA,MAAM,KAAK,4BAGR,UAAU,GAAG,mBAAmB,KAAG,YA2GrC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/index.d.ts

@@ -48,4 +48,6 @@ export { default as Steps } from './Steps';
 export * from './Steps';
 export { default as Badge } from './Badge';
 export * from './Badge';
+export { default as CrossSellCard } from './CrossSellCard';
+export * from './CrossSellCard';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,OAAO,CAAC;AAEtB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,QAAQ,CAAC;AAEvB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/index.es.js

@@ -4966,7 +4966,7 @@ var Checkbox = e$1.forwardRef(function Checkbox(_a, ref) {
     return (e$1.createElement("label", { className: "ods-checkbox__root", htmlFor: id },
         e$1.createElement("input", __assign({ ref: ref, id: id, className: classNames('ods-checkbox', className) }, rest, { type: "checkbox", "data-indeterminate": indeterminate })),
         e$1.createElement("span", { className: classNames('ods-checkbox__checkmark', indeterminate && 'ods-checkbox__checkmark--indeterminate') }),
-        label && (e$1.createElement("span", { className: "ods-typography ods-typography__paragraph ods-checkbox__label" }, label))));
+        label && (e$1.createElement("span", { className: "ods-typography ods-typography__description ods-checkbox__label" }, label))));
 });
 
 var Radio = e$1.forwardRef(function Radio(_a, ref) {
@@ -4974,7 +4974,7 @@ var Radio = e$1.forwardRef(function Radio(_a, ref) {
     return (e$1.createElement("label", { className: "ods-radio__root", htmlFor: id },
         e$1.createElement("input", __assign({ ref: ref, id: id, className: classNames('ods-radio', className) }, rest, { type: "radio" })),
         e$1.createElement("span", { className: "ods-radio__checkmark" }),
-        label && (e$1.createElement("span", { className: "ods-typography ods-typography__paragraph ods-radio__label" }, label))));
+        label && (e$1.createElement("span", { className: "ods-typography ods-typography__description ods-radio__label" }, label))));
 });
 
 function LinkBase(_a, ref) {
@@ -25413,77 +25413,32 @@ var Stepper = e$1.forwardRef(function Stepper(_a, ref) {
                         e$1.createElement(To, { size: 24 })))))));
 });
 
-var FinalSteps = function () {
-    return (e$1.createElement(e$1.Fragment, null,
-        e$1.createElement("path", { d: "M52 10H64", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M64 10L69 10", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("circle", { cx: "74", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M79 10H84", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M84 10H96", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("circle", { r: "5", transform: "matrix(-1 0 0 1 106 10)", stroke: "#EBECF5", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M101 10H96", stroke: "#EBECF5", strokeWidth: "2" })));
-};
 var Steps = function (_a) {
     var currentStep = _a.currentStep, steps = _a.steps;
-    if (currentStep === 1) {
-        return (e$1.createElement("svg", { width: "116", height: "20", viewBox: "0 0 116 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "step-1" },
-            e$1.createElement("circle", { cx: "9.5", cy: "10.5", r: "5.5", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("path", { d: "M15 10H20", stroke: "#13BDBD", strokeWidth: "2" }),
-            steps === 2 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M20 10H32", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M32 10L37 10", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { cx: "42", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }))),
-            steps === 3 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M20 10H32", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M32 10L37 10", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { cx: "42", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M47 10H52", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M52 10H64", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M64 10L69 10", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { cx: "74", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }))),
-            steps === 4 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M20 10H32", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M32 10L37 10", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { cx: "42", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M47 10H52", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement(FinalSteps, null)))));
-    }
-    if (currentStep === 2) {
-        return (e$1.createElement("svg", { width: "116", height: "20", viewBox: "0 0 116 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "step-2" },
-            e$1.createElement("circle", { cx: "10", cy: "10", r: "9", fill: "#13BDBD", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("path", { d: "M7 10L9 12L13 8", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            e$1.createElement("path", { d: "M20 10H32", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("path", { d: "M32 10L37 10", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("circle", { cx: "42", cy: "10", r: "5", stroke: "#13BDBD", strokeWidth: "2" }),
-            steps > 2 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M47 10H52", stroke: "#13BDBD", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M52 10H64", stroke: "#EBECF5", strokeWidth: "2" }))),
-            steps === 3 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M52 10H64", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M64 10L69 10", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { cx: "74", cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }))),
-            steps === 4 && e$1.createElement(FinalSteps, null)));
-    }
-    return (e$1.createElement("svg", { width: "116", height: "20", viewBox: "0 0 116 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "step-3" },
-        e$1.createElement("circle", { cx: "10", cy: "10", r: "9", fill: "#13BDBD", stroke: "#13BDBD", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M7 10L9 12L13 8", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-        e$1.createElement("path", { d: "M20 10H32", stroke: "#13BDBD", strokeWidth: "2" }),
-        e$1.createElement("circle", { cx: "42", cy: "10", r: "9", fill: "#13BDBD", stroke: "#13BDBD", strokeWidth: "2" }),
-        e$1.createElement("path", { d: "M39 10L41 12L45 8", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-        e$1.createElement("path", { d: "M52 10H64", stroke: "#13BDBD", strokeWidth: "2" }),
-        currentStep === 3 ? (e$1.createElement(e$1.Fragment, null,
-            e$1.createElement("path", { d: "M64 10L69 10", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("circle", { cx: "74", cy: "10", r: "5", stroke: "#13BDBD", strokeWidth: "2" }),
-            steps > 3 && (e$1.createElement(e$1.Fragment, null,
-                e$1.createElement("path", { d: "M79 10H84", stroke: "#13BDBD", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M84 10H96", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("path", { d: "M101 10H96", stroke: "#EBECF5", strokeWidth: "2" }),
-                e$1.createElement("circle", { r: "5", transform: "matrix(-1 0 0 1 106 10)", stroke: "#EBECF5", strokeWidth: "2" }))))) : (e$1.createElement(e$1.Fragment, null,
-            e$1.createElement("circle", { cx: "74", cy: "10", r: "9", fill: "#13BDBD", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("path", { d: "M71 10L73 12L77 8", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-            e$1.createElement("path", { d: "M84 10H96", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("path", { d: "M101 10H96", stroke: "#13BDBD", strokeWidth: "2" }),
-            e$1.createElement("circle", { r: "5", transform: "matrix(-1 0 0 1 106 10)", stroke: "#13BDBD", strokeWidth: "2" })))));
+    var getCurrentStep = function (step) {
+        var left = 30 * (step - 1);
+        if (step === currentStep) {
+            return (e$1.createElement(e$1.Fragment, null,
+                e$1.createElement("circle", { cx: step === 1 ? 9.5 : left + 12, cy: "10", r: "5", stroke: "#13BDBD", strokeWidth: "2" }),
+                steps > step && (e$1.createElement(e$1.Fragment, null,
+                    e$1.createElement("path", { d: step === 1 ? 'M15 10H20' : "M".concat(left + 17, " 10H").concat(left + 22), stroke: "#13BDBD", strokeWidth: "2" }),
+                    e$1.createElement("path", { d: step === 1 ? 'M20 10H37' : "M".concat(left + 22, " 10H").concat(left + 38), stroke: "#EBECF5", strokeWidth: "2" })))));
+        }
+        if (currentStep > step) {
+            return (e$1.createElement(e$1.Fragment, null,
+                e$1.createElement("circle", { cx: step === 1 ? 10 : left + 12, cy: "10", r: "9", fill: "#13BDBD", stroke: "#13BDBD", strokeWidth: "2" }),
+                e$1.createElement("path", { d: step === 1
+                        ? 'M7 10 L 9 12 L 13 8'
+                        : "M".concat(left + 9, " 10 L ").concat(left + 11, " 12 L ").concat(left + 16, " 8"), stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+                steps > step && (e$1.createElement(e$1.Fragment, null,
+                    e$1.createElement("path", { d: "M".concat(step === 1 ? 20 : left + 22, " 10H").concat(step * 30 + 2), stroke: "#13BDBD", strokeWidth: "2" }),
+                    e$1.createElement("path", { d: "M".concat(step * 30 + 2, " 10L").concat(step * 30 + 7, " 10"), stroke: "#13BDBD", strokeWidth: "2" })))));
+        }
+        return (e$1.createElement(e$1.Fragment, null,
+            e$1.createElement("circle", { cx: step === 1 ? 9.5 : left + 12, cy: "10", r: "5", stroke: "#EBECF5", strokeWidth: "2" }),
+            steps > step && (e$1.createElement("path", { d: step === 1 ? 'M15 10H37' : "M".concat(left + 17, " 10H").concat(left + 38), stroke: "#EBECF5", strokeWidth: "2" }))));
+    };
+    return (e$1.createElement("svg", { height: "20", width: 30 * (steps - 1) + 22, viewBox: "0 0 ".concat(30 * (steps - 1) + 22, " 20"), fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": "step-".concat(currentStep) }, Array.from(Array(steps).keys()).map(function (step) { return (e$1.createElement("g", { key: step }, getCurrentStep(step + 1))); })));
 };
 
 var Badge = e$1.forwardRef(function Badge(_a, ref) {
@@ -25497,5 +25452,19 @@ var Badge = e$1.forwardRef(function Badge(_a, ref) {
         variation === 'tiny' && e$1.createElement("div", { className: "ods-badge__content" })));
 });
 
-export { Alert, Badge, Button, Carousel, Checkbox, Col, Container, Divider, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row, Search, Select, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TopBar, TransactionListItem, Typography };
+var CrossSellCard = e$1.forwardRef(function CrossSellCard(_a, ref) {
+    var title = _a.title, className = _a.className, description = _a.description, imageSrc = _a.imageSrc, ctaText = _a.ctaText, ctaAction = _a.ctaAction, rest = __rest(_a, ["title", "className", "description", "imageSrc", "ctaText", "ctaAction"]);
+    return (e$1.createElement("div", __assign({ ref: ref }, rest, { className: classNames('ods-cross-sell-card', className) }),
+        e$1.createElement("div", { className: "ods-cross-sell-card__content" },
+            e$1.createElement("div", { className: "ods-cross-sell-card__information" },
+                e$1.createElement("div", { className: "ods-typography--inverse ods-typography__heading3" }, title),
+                e$1.createElement("div", { className: "ods-typography--inverse ods-typography__description ods-cross-sell-card__description " }, description)),
+            imageSrc && (e$1.createElement("img", { className: "ods-cross-sell-card__image", src: imageSrc }))),
+        e$1.createElement("button", { className: "ods-cross-sell-card__cta", onClick: ctaAction, "data-testid": "cta-test" },
+            ctaText,
+            " ",
+            e$1.createElement(ee, { className: "ods-cross-sell-card__cta-icon" }))));
+});
+
+export { Alert, Badge, Button, Carousel, Checkbox, Col, Container, CrossSellCard, Divider, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row, Search, Select, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TopBar, TransactionListItem, Typography };
 //# sourceMappingURL=index.es.js.map