@thecb/components 7.2.1 → 7.3.2-beta.1

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

@@ -24630,61 +24630,6 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
-var HiddenRadioInput = styled__default.input.withConfig({
-  displayName: "RadioButtonWithLabel__HiddenRadioInput",
-  componentId: "sc-1m9whwg-0"
-})(["position:absolute;opacity:0;margin:0;"]);
-var Circle = styled__default.div.withConfig({
-  displayName: "RadioButtonWithLabel__Circle",
-  componentId: "sc-1m9whwg-1"
-})(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:1px solid ", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], GREY_CHATEAU, MATISSE_BLUE);
-var InputAndLabelContainer = styled__default(Cluster).withConfig({
-  displayName: "RadioButtonWithLabel__InputAndLabelContainer",
-  componentId: "sc-1m9whwg-2"
-})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:1px solid ", ";}", ":focus + label ", "{{box-shadow:0px 0px 2px 1px ", ";}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, MATISSE_BLUE, HiddenRadioInput, Circle, MATISSE_BLUE);
-
-var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
-  var _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "" : _ref$id,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? "" : _ref$value,
-      _ref$labelText = _ref.labelText,
-      labelText = _ref$labelText === void 0 ? "" : _ref$labelText,
-      groupName = _ref.groupName,
-      setValue = _ref.setValue,
-      ariaInvalid = _ref.ariaInvalid,
-      index = _ref.index;
-  return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
-    align: "center",
-    childGap: "0.5rem"
-  }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
-    "aria-invalid": ariaInvalid,
-    style: {
-      marginTop: 0
-    },
-    type: "radio",
-    name: groupName,
-    id: id,
-    value: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    defaultChecked: index === 0
-  }), /*#__PURE__*/React__default.createElement(Text$1, {
-    as: "label",
-    htmlFor: id,
-    extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
-  }, /*#__PURE__*/React__default.createElement(Circle, null), labelText));
-};
-
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$s = {
@@ -24694,7 +24639,7 @@ var fallbackValues$s = {
 
 var HiddenRadioButton = styled__default.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
-  componentId: "sc-1jed2i-0"
+  componentId: "sc-v6hie9-0"
 })(["opacity:0;position:absolute;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
@@ -35898,6 +35843,14 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
 var shineFrames = styled.keyframes(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled__default.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -46321,52 +46274,6 @@ PhoneForm.reducer = reducer$9;
 PhoneForm.mapStateToProps = mapStateToProps$a;
 PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
 
-var DefaultHeading = styled__default.div.withConfig({
-  displayName: "RadioGroup__DefaultHeading",
-  componentId: "sc-7lqrl8-0"
-})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
-var StyledFieldset = styled__default.fieldset.withConfig({
-  displayName: "RadioGroup__StyledFieldset",
-  componentId: "sc-7lqrl8-1"
-})(["", ""], function (props) {
-  return props.$extraStyles;
-});
-
-var RadioGroup = function RadioGroup(_ref) {
-  var headingText = _ref.headingText,
-      groupName = _ref.groupName,
-      _ref$heading = _ref.heading,
-      Heading = _ref$heading === void 0 ? /*#__PURE__*/React__default.createElement(DefaultHeading, {
-    role: "heading",
-    id: "radio-group-".concat(groupName, "-heading")
-  }, headingText) : _ref$heading,
-      config = _ref.config,
-      extraStyles = _ref.extraStyles,
-      field = _ref.field,
-      fieldActions = _ref.fieldActions;
-
-  var setValue = function setValue(value) {
-    return fieldActions.set(value);
-  };
-
-  return /*#__PURE__*/React__default.createElement(StyledFieldset, {
-    role: "radiogroup",
-    "aria-labelledby": "radio-group-".concat(groupName, "-heading"),
-    $extraStyles: extraStyles
-  }, Heading !== null && Heading, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "4px"
-  }, config.map(function (c, idx) {
-    return /*#__PURE__*/React__default.createElement(RadioButtonWithLabel, _extends({
-      index: idx,
-      key: c.id
-    }, c, {
-      groupName: groupName,
-      setValue: setValue,
-      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
-    }));
-  })));
-};
-
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
@@ -47252,7 +47159,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),
@@ -47278,7 +47187,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",
@@ -47678,8 +47588,6 @@ exports.ProfileImage = ProfileImage;
 exports.PropertiesAddIcon = PropertiesAddIcon$1;
 exports.PropertiesIconSmall = PropertiesIconSmall$1;
 exports.RadioButton = RadioButton$2;
-exports.RadioButtonWithLabel = RadioButtonWithLabel;
-exports.RadioGroup = RadioGroup;
 exports.RadioSection = RadioSection$1;
 exports.Reel = Reel;
 exports.RefundIcon = RefundIcon;