@thecb/components 7.3.1 → 7.3.2-beta.2

package/dist/.storybook/page.d.ts

@@ -0,0 +1,13 @@
+declare function _default({ title, Component, height, reducer, containerMax, containerMin }: {
+    title: any;
+    Component: any;
+    height: any;
+    reducer?: (() => void) | undefined;
+    containerMax?: string | undefined;
+    containerMin?: string | undefined;
+}): {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;

package/dist/.storybook/page.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { select, radios, text } from "@storybook/addon-knobs";
+import { Provider } from 'react-redux';
+import { createStore } from "redux";
+import { BrowserRouter as Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
+import { SFTheme, APCTheme } from "./themes";
+var themesLabel = "Theme";
+var themes = {
+    SF: SFTheme,
+    APC: APCTheme,
+    None: {},
+};
+var defaultValue = SFTheme;
+var groupId = "Theme";
+var animateLabel = "Animate";
+var animateOptions = {
+    play: "play",
+    pause: "pause"
+};
+var animateDefaultValue = "pause";
+var animateGroupID = "Container";
+var themeDecorator = function (storyFn) { return (React.createElement(ThemeProvider, { theme: select(themesLabel, themes, defaultValue, groupId) }, storyFn())); };
+export default (function (_a) {
+    var title = _a.title, Component = _a.Component, height = _a.height, _b = _a.reducer, reducer = _b === void 0 ? function () { } : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "40rem" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "20rem" : _d;
+    var history = createBrowserHistory();
+    var store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+    return {
+        title: title,
+        component: Component,
+        decorators: [
+            themeDecorator,
+            function (storyFn) { return (React.createElement(Router, { history: history },
+                React.createElement(Provider, { store: store },
+                    React.createElement("div", { style: { height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" } },
+                        React.createElement(ResizingContainer, { height: height, animate: radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID), containerMax: text("Container Max", containerMax, animateGroupID), containerMin: text("Container Min", containerMin, animateGroupID) }, storyFn()))))); }
+        ]
+    };
+});

package/dist/.storybook/themes/apc.theme.d.ts

@@ -0,0 +1,79 @@
+export namespace APCTheme {
+    namespace values {
+        namespace Button {
+            namespace active {
+                const primary: string;
+                const secondary: string;
+                const smallPrimary: string;
+                const smallSecondary: string;
+            }
+            namespace backgroundColor {
+                const primary_1: string;
+                export { primary_1 as primary };
+                const secondary_1: string;
+                export { secondary_1 as secondary };
+                const smallPrimary_1: string;
+                export { smallPrimary_1 as smallPrimary };
+                const smallSecondary_1: string;
+                export { smallSecondary_1 as smallSecondary };
+            }
+            namespace border {
+                const primary_2: string;
+                export { primary_2 as primary };
+                const secondary_2: string;
+                export { secondary_2 as secondary };
+                const smallPrimary_2: string;
+                export { smallPrimary_2 as smallPrimary };
+                const smallSecondary_2: string;
+                export { smallSecondary_2 as smallSecondary };
+            }
+            namespace color {
+                const primary_3: string;
+                export { primary_3 as primary };
+                const secondary_3: string;
+                export { secondary_3 as secondary };
+                const smallPrimary_3: string;
+                export { smallPrimary_3 as smallPrimary };
+                const smallSecondary_3: string;
+                export { smallSecondary_3 as smallSecondary };
+            }
+            namespace focus {
+                const primary_4: string;
+                export { primary_4 as primary };
+                const secondary_4: string;
+                export { secondary_4 as secondary };
+                const smallPrimary_4: string;
+                export { smallPrimary_4 as smallPrimary };
+                const smallSecondary_4: string;
+                export { smallSecondary_4 as smallSecondary };
+            }
+            namespace hover {
+                const primary_5: string;
+                export { primary_5 as primary };
+                const secondary_5: string;
+                export { secondary_5 as secondary };
+                const smallPrimary_5: string;
+                export { smallPrimary_5 as smallPrimary };
+                const smallSecondary_5: string;
+                export { smallSecondary_5 as smallSecondary };
+            }
+        }
+        namespace Footer {
+            const backgroundColor_1: string;
+            export { backgroundColor_1 as backgroundColor };
+        }
+        namespace Header {
+            const backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
+        }
+        namespace HighlightTabRow {
+            const backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+        }
+        const linkColor: string;
+        const logo: string;
+        const primaryColor: string;
+        const secondaryColor: string;
+        const textColor: string;
+    }
+}

package/dist/.storybook/themes/apc.theme.js

@@ -0,0 +1 @@
+export var APCTheme = { values: { "Button": { "active": { "primary": "background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;", "secondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000", "smallPrimary": "background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100", "smallSecondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000" }, "backgroundColor": { "primary": "#EC1C24", "secondary": "#F6F6F9", "smallPrimary": "#EC1C24", "smallSecondary": "#F6F6F9" }, "border": { "primary": "2px solid #EC1C24;", "secondary": "2px solid #EC1C24;", "smallPrimary": "2px solid %#EC1C24;", "smallSecondary": "2px solid #EC1C24;" }, "color": { "primary": "#F6F6F9", "secondary": "#EC1C24", "smallPrimary": "#F6F6F9", "smallSecondary": "#EC1C24" }, "focus": { "primary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "secondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;", "smallPrimary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "smallSecondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;" }, "hover": { "primary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "secondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;", "smallPrimary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "smallSecondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;" } }, "Footer": { "backgroundColor": "#56575B" }, "Header": { "backgroundColor": "#FFFFFF" }, "HighlightTabRow": { "backgroundColor": "#215B9E" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/.storybook/themes/index.d.ts

@@ -0,0 +1,2 @@
+export { SFTheme } from "./sf.theme";
+export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/index.js

@@ -0,0 +1,2 @@
+export { SFTheme } from "./sf.theme";
+export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/sf.theme.d.ts

@@ -0,0 +1,231 @@
+export namespace SFTheme {
+    namespace values {
+        export namespace AmountCallout {
+            const color: string;
+        }
+        export namespace Breadcrumb {
+            const color_1: string;
+            export { color_1 as color };
+        }
+        export namespace Button {
+            export namespace active {
+                const danger: string;
+                const ghost: string;
+                const primary: string;
+                const secondary: string;
+                const smallGhost: string;
+                const smallPrimary: string;
+                const smallSecondary: string;
+            }
+            export namespace backgroundColor {
+                const danger_1: string;
+                export { danger_1 as danger };
+                const ghost_1: string;
+                export { ghost_1 as ghost };
+                const primary_1: string;
+                export { primary_1 as primary };
+                const secondary_1: string;
+                export { secondary_1 as secondary };
+                const smallGhost_1: string;
+                export { smallGhost_1 as smallGhost };
+                const smallPrimary_1: string;
+                export { smallPrimary_1 as smallPrimary };
+                const smallSecondary_1: string;
+                export { smallSecondary_1 as smallSecondary };
+            }
+            export namespace border {
+                const danger_2: string;
+                export { danger_2 as danger };
+                const ghost_2: string;
+                export { ghost_2 as ghost };
+                const primary_2: string;
+                export { primary_2 as primary };
+                const secondary_2: string;
+                export { secondary_2 as secondary };
+                const smallGhost_2: string;
+                export { smallGhost_2 as smallGhost };
+                const smallPrimary_2: string;
+                export { smallPrimary_2 as smallPrimary };
+                const smallSecondary_2: string;
+                export { smallSecondary_2 as smallSecondary };
+            }
+            export namespace color_2 {
+                const danger_3: string;
+                export { danger_3 as danger };
+                const ghost_3: string;
+                export { ghost_3 as ghost };
+                const primary_3: string;
+                export { primary_3 as primary };
+                const secondary_3: string;
+                export { secondary_3 as secondary };
+                const smallGhost_3: string;
+                export { smallGhost_3 as smallGhost };
+                const smallPrimary_3: string;
+                export { smallPrimary_3 as smallPrimary };
+                const smallSecondary_3: string;
+                export { smallSecondary_3 as smallSecondary };
+            }
+            export { color_2 as color };
+            export namespace disabled {
+                const danger_4: string;
+                export { danger_4 as danger };
+                const ghost_4: string;
+                export { ghost_4 as ghost };
+                const primary_4: string;
+                export { primary_4 as primary };
+                const secondary_4: string;
+                export { secondary_4 as secondary };
+                const smallGhost_4: string;
+                export { smallGhost_4 as smallGhost };
+                const smallPrimary_4: string;
+                export { smallPrimary_4 as smallPrimary };
+                const smallSecondary_4: string;
+                export { smallSecondary_4 as smallSecondary };
+            }
+            export namespace focus {
+                const danger_5: string;
+                export { danger_5 as danger };
+                const ghost_5: string;
+                export { ghost_5 as ghost };
+                const primary_5: string;
+                export { primary_5 as primary };
+                const secondary_5: string;
+                export { secondary_5 as secondary };
+                const smallGhost_5: string;
+                export { smallGhost_5 as smallGhost };
+                const smallPrimary_5: string;
+                export { smallPrimary_5 as smallPrimary };
+                const smallSecondary_5: string;
+                export { smallSecondary_5 as smallSecondary };
+            }
+            export namespace hover {
+                const danger_6: string;
+                export { danger_6 as danger };
+                const ghost_6: string;
+                export { ghost_6 as ghost };
+                const primary_6: string;
+                export { primary_6 as primary };
+                const secondary_6: string;
+                export { secondary_6 as secondary };
+                const smallGhost_6: string;
+                export { smallGhost_6 as smallGhost };
+                const smallPrimary_6: string;
+                export { smallPrimary_6 as smallPrimary };
+                const smallSecondary_6: string;
+                export { smallSecondary_6 as smallSecondary };
+            }
+        }
+        export namespace Checkbox {
+            namespace boxShadow {
+                const _default: string;
+                export { _default as default };
+            }
+            namespace checkedStyles {
+                const _default_1: string;
+                export { _default_1 as default };
+            }
+        }
+        export namespace Dropdown {
+            const hoverColor: string;
+            const selectedColor: string;
+        }
+        export namespace Footer {
+            const backgroundColor_1: string;
+            export { backgroundColor_1 as backgroundColor };
+            export const logoHeight: string;
+            export const subfooterColor: string;
+        }
+        export namespace FormInput {
+            namespace hoverFocusStyles {
+                const _default_2: string;
+                export { _default_2 as default };
+            }
+            namespace linkColor {
+                const _default_3: string;
+                export { _default_3 as default };
+            }
+        }
+        export namespace Global {
+            const baseFontSize: string;
+            const baseMobileFontSize: string;
+            const pageBackground: string;
+        }
+        export namespace Header {
+            const backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
+        }
+        export namespace Icons {
+            namespace accentColor {
+                const error: string;
+                const info: string;
+                const success: string;
+            }
+            namespace primaryColor {
+                const error_1: string;
+                export { error_1 as error };
+                const info_1: string;
+                export { info_1 as info };
+                const success_1: string;
+                export { success_1 as success };
+            }
+            namespace singleIconColor {
+                export const darkMode: string;
+                const primary_7: string;
+                export { primary_7 as primary };
+                const secondary_7: string;
+                export { secondary_7 as secondary };
+            }
+            namespace subIconColor {
+                const error_2: string;
+                export { error_2 as error };
+                const info_2: string;
+                export { info_2 as info };
+                const success_2: string;
+                export { success_2 as success };
+            }
+        }
+        export namespace ModalLink {
+            const linkColor_1: string;
+            export { linkColor_1 as linkColor };
+        }
+        export namespace NavMenu {
+            const backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+        }
+        export namespace ProfileTab {
+            const activeTabAccent: string;
+            const activeTabBackground: string;
+            const activeTabHover: string;
+        }
+        export namespace RadioButton {
+            const activeColor: string;
+        }
+        export namespace Spinner {
+            const color_3: string;
+            export { color_3 as color };
+        }
+        export namespace ToggleSwitch {
+            const onBackground: string;
+        }
+        export namespace Workflow {
+            const accentColor_1: string;
+            export { accentColor_1 as accentColor };
+            export const fontFamily: string;
+            const linkColor_2: string;
+            export { linkColor_2 as linkColor };
+            export const primaryButtonColor: string;
+            export const secondaryButtonColor: string;
+            export const textColor: string;
+            export const workflowFooterColor: string;
+            export const workflowHeaderColor: string;
+        }
+        const linkColor_3: string;
+        export { linkColor_3 as linkColor };
+        export const logo: string;
+        const primaryColor_1: string;
+        export { primaryColor_1 as primaryColor };
+        export const secondaryColor: string;
+        const textColor_1: string;
+        export { textColor_1 as textColor };
+    }
+}

package/dist/.storybook/themes/sf.theme.js

@@ -0,0 +1 @@
+export var SFTheme = { values: { "AmountCallout": { "color": "#347BB2" }, "Breadcrumb": { "color": "#347BB2" }, "Button": { "active": { "danger": "background-color: #870000; border: 2px solid #870000; box-shadow: 0 0 10px #ED125F;", "ghost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "primary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2", "secondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;", "smallGhost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "smallPrimary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2;", "smallSecondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;" }, "backgroundColor": { "danger": "#ED125F", "ghost": "transparent", "primary": "#347BB2", "secondary": "transparent", "smallGhost": "transparent", "smallPrimary": "#347BB2", "smallSecondary": "transparent" }, "border": { "danger": "2px solid #ED125F;", "ghost": "none", "primary": "2px solid #347BB2;", "secondary": "2px solid #347BB2;", "smallGhost": "none", "smallPrimary": "2px solid #347BB2;", "smallSecondary": "2px solid #347BB2;" }, "color": { "danger": "#FFFFFF", "ghost": "#347BB2", "primary": "#FFFFFF", "secondary": "#347BB2", "smallGhost": "#347BB2", "smallPrimary": "#FFFFFF", "smallSecondary": "#347BB2" }, "disabled": { "danger": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "ghost": "color: #6E727E; border: none", "primary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "secondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallGhost": "color: #6E727E; border: none;", "smallPrimary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallSecondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }" }, "focus": { "danger": "outline: none; background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F", "ghost": "outline: none; box-shadow: none; color: #024C85;", "primary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "outline: none; box-shadow: none; color: #024C85;", "smallPrimary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" }, "hover": { "danger": "background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F;", "ghost": "cursor: pointer; color: #024C85;", "primary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "cursor: pointer; color: #024C85;", "smallPrimary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" } }, "Checkbox": { "boxShadow": { "default": "0 0 0 3px #D8E5F2;" }, "checkedStyles": { "default": "background: #347BB2; border: 1px solid #347BB2;" } }, "Dropdown": { "hoverColor": "#EFFAFF", "selectedColor": "#347BB2" }, "Footer": { "backgroundColor": "#182848", "logoHeight": "52px", "subfooterColor": "#347BB2" }, "FormInput": { "hoverFocusStyles": { "default": "outline: none; text-decoration: underline; color: #024C85;" }, "linkColor": { "default": "#347BB2" } }, "Global": { "baseFontSize": "16px", "baseMobileFontSize": "14px", "pageBackground": "#F6F6F9" }, "Header": { "backgroundColor": "#347BB2" }, "Icons": { "accentColor": { "error": "#3B414D", "info": "#3B414D", "success": "#3B414D" }, "primaryColor": { "error": "#FFFFFF", "info": "#FFFFFF", "success": "#FFFFFF" }, "singleIconColor": { "darkMode": "#FFFFFF", "primary": "#347BB2", "secondary": "#3B414D" }, "subIconColor": { "error": "#ED125F", "info": "#347BB2", "success": "#317D4F" } }, "ModalLink": { "linkColor": "#347BB2" }, "NavMenu": { "backgroundColor": "#347BB2" }, "ProfileTab": { "activeTabAccent": "#347BB2", "activeTabBackground": "#FFFFFF", "activeTabHover": "#D8E5F2" }, "RadioButton": { "activeColor": "#347BB2" }, "Spinner": { "color": "#347BB2" }, "ToggleSwitch": { "onBackground": "#347BB2" }, "Workflow": { "accentColor": "#214566", "fontFamily": "Open Sans, sans-serif", "linkColor": "#214566", "primaryButtonColor": "#347BB2", "secondaryButtonColor": "#347BB2", "textColor": "#091325", "workflowFooterColor": "#182848", "workflowHeaderColor": "#347BB2" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/button-with-link/ButtonWithLinkProps.js

@@ -0,0 +1 @@
+;

package/dist/index.cjs.js

@@ -16055,6 +16055,45 @@ var ProfileImage = function ProfileImage() {
   }));
 };
 
+var FindIconSmall = function FindIconSmall(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_0_1287",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "15",
+    height: "14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_0_1287)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -47258,7 +47297,9 @@ var WorkflowTile = function WorkflowTile(_ref) {
       workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
       _ref$workflowActionNa = _ref.workflowActionName,
       workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
-      slug = _ref.slug;
+      slug = _ref.slug,
+      _ref$buttonVariant = _ref.buttonVariant,
+      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
   return /*#__PURE__*/React__default.createElement(Box, {
     background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
@@ -47284,7 +47325,8 @@ var WorkflowTile = function WorkflowTile(_ref) {
     padding: "1.5rem 1rem",
     background: GRECIAN_GREY
   }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
-    primary: true,
+    variant: buttonVariant,
+    primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
@@ -47614,6 +47656,7 @@ exports.ErroredIcon = ErroredIcon;
 exports.ExternalLink = ExternalLink;
 exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FailedIcon = FailedIcon;
+exports.FindIconSmall = FindIconSmall$1;
 exports.FooterWithSubfooter = FooterWithSubfooter$1;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordIcon = ForgotPasswordIcon$1;