@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -0,0 +1,86 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
+import posed from "react-pose";
+import { linear } from "@popmotion/easing";
+import Text from "../text";
+import { Box, Center } from "../layouts";
+import { fallbackValues } from "./ButtonWithAction.theme";
+import SpinnerIcon from "../../../deprecated/spinner";
+import { noop } from "../../../util/general";
+import { createThemeValues } from "../../../util/themeUtils";
+var rotate = posed.div({
+    fixed: {
+        rotate: "0deg"
+    },
+    rotate: {
+        rotate: "360deg",
+        transition: {
+            rotate: {
+                ease: linear,
+                duration: 1000,
+                loop: Infinity
+            }
+        }
+    }
+});
+var SpinnerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n"])));
+var SpinnerIconWrapper = styled(rotate)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var Spinner = function (_a) {
+    var isMobile = _a.isMobile;
+    return (React.createElement(SpinnerContainer, null,
+        React.createElement(SpinnerIconWrapper, { initialPose: "fixed", pose: "rotate" },
+            React.createElement(SpinnerIcon, { isMobile: isMobile }))));
+};
+/* Most of the time, to use this button you'll only need to specify:
+  - A variant (if different than primary)
+  - An action
+  - Text
+
+  Optionally, you can also pass:
+  - isLoading to show a spinner
+  - dataQa for use with test cafe
+  - contentOverride to use the button as a wrapper around arbitrary content
+  - extraStyles if you need an escape hatch. Extra styles should be used sparingly.
+
+  Note: the children prop is only used if contentOverride is set to true, in which case
+  the text prop is ignored.
+  
+*/
+var ButtonWithAction = function (_a) {
+    var _b = _a.action, action = _b === void 0 ? noop : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, text = _a.text, _d = _a.textWrap, textWrap = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.dataQa, dataQa = _f === void 0 ? null : _f, textExtraStyles = _a.textExtraStyles, _g = _a.contentOverride, contentOverride = _g === void 0 ? false : _g, _h = _a.extraStyles, extraStyles = _h === void 0 ? "" : _h, tabIndex = _a.tabIndex, children = _a.children, rest = __rest(_a, ["action", "variant", "text", "textWrap", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children"]);
+    var themeContext = useContext(ThemeContext);
+    var themeValues = createThemeValues(themeContext, fallbackValues, "Button", variant);
+    var isMobile = themeContext.isMobile;
+    var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
+    var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
+    var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n  ";
+    return (React.createElement(Box, __assign({ variant: variant, padding: themeValues.padding, minHeight: themeValues.height, minWidth: themeValues.minWidth, background: themeValues.backgroundColor, border: themeValues.border, hoverStyles: hoverStyles, activeStyles: activeStyles, disabledStyles: disabledStyles, as: "button", onClick: isLoading ? undefined : action, borderRadius: "2px", theme: themeContext, extraStyles: "margin: 0.5rem; ".concat(extraStyles), dataQa: dataQa, tabIndex: tabIndex }, rest), contentOverride ? (children) : (React.createElement(Center, { intrinsic: true }, isLoading ? (React.createElement(Spinner, { isMobile: isMobile })) : (React.createElement(Text, { weight: themeValues.fontWeight, variant: themeValues.fontSizeVariant, color: themeValues.color, textWrap: textWrap, extraStyles: textExtraStyles }, text))))));
+};
+export default ButtonWithAction;
+var templateObject_1, templateObject_2;

package/dist/src/components/atoms/button-with-action/ButtonWithAction.stories.d.ts

@@ -0,0 +1,7 @@
+export function buttonWithAction(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import ButtonWithAction from "./ButtonWithAction";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    primary: "primary",
+    secondary: "secondary",
+    back: "back",
+    smallPrimary: "smallPrimary",
+    smallSecondary: "smallSecondary",
+    ghost: "ghost",
+    smallGhost: "smallGhost",
+    danger: "danger",
+    None: undefined
+};
+var defaultValue = "primary";
+var groupId = "props";
+export var buttonWithAction = function () { return (React.createElement(ButtonWithAction, { variant: select(variantsLabel, variants, defaultValue, groupId), text: text("text", "button", "props"), isLoading: boolean("isLoading", false, "props"), action: text("action", undefined, "props") })); };
+var story = page({
+    title: "Components|Atoms/ButtonWithAction",
+    Component: ButtonWithAction
+});
+export default story;

package/dist/src/components/atoms/button-with-action/ButtonWithAction.theme.d.ts

@@ -0,0 +1,342 @@
+export namespace fallbackValues {
+    export { padding };
+    export { color };
+    export { fontSizeVariant };
+    export { fontWeight };
+    export { height };
+    export { minWidth };
+    export { backgroundColor };
+    export { border };
+    export { hoverBackgroundColor };
+    export { hoverBorderColor };
+    export { hoverColor };
+    export { activeBackgroundColor };
+    export { activeBorderColor };
+    export { activeColor };
+}
+declare namespace padding {
+    const primary: string;
+    const secondary: string;
+    const back: string;
+    const smallPrimary: string;
+    const smallSecondary: string;
+    const smallGhost: string;
+    const tertiary: string;
+    const ghost: string;
+    const danger: string;
+    const whiteSecondary: string;
+    const whitePrimary: string;
+}
+declare namespace color {
+    const primary_1: string;
+    export { primary_1 as primary };
+    const secondary_1: string;
+    export { secondary_1 as secondary };
+    const back_1: string;
+    export { back_1 as back };
+    const smallPrimary_1: string;
+    export { smallPrimary_1 as smallPrimary };
+    const smallSecondary_1: string;
+    export { smallSecondary_1 as smallSecondary };
+    const smallGhost_1: string;
+    export { smallGhost_1 as smallGhost };
+    const ghost_1: string;
+    export { ghost_1 as ghost };
+    const tertiary_1: string;
+    export { tertiary_1 as tertiary };
+    const danger_1: string;
+    export { danger_1 as danger };
+    const whiteSecondary_1: string;
+    export { whiteSecondary_1 as whiteSecondary };
+    const whitePrimary_1: string;
+    export { whitePrimary_1 as whitePrimary };
+}
+declare namespace fontSizeVariant {
+    const primary_2: string;
+    export { primary_2 as primary };
+    const secondary_2: string;
+    export { secondary_2 as secondary };
+    const back_2: string;
+    export { back_2 as back };
+    const smallPrimary_2: string;
+    export { smallPrimary_2 as smallPrimary };
+    const smallSecondary_2: string;
+    export { smallSecondary_2 as smallSecondary };
+    const smallGhost_2: string;
+    export { smallGhost_2 as smallGhost };
+    const ghost_2: string;
+    export { ghost_2 as ghost };
+    const tertiary_2: string;
+    export { tertiary_2 as tertiary };
+    const danger_2: string;
+    export { danger_2 as danger };
+    const whiteSecondary_2: string;
+    export { whiteSecondary_2 as whiteSecondary };
+    const whitePrimary_2: string;
+    export { whitePrimary_2 as whitePrimary };
+}
+declare namespace fontWeight {
+    const primary_3: string;
+    export { primary_3 as primary };
+    const secondary_3: string;
+    export { secondary_3 as secondary };
+    const back_3: string;
+    export { back_3 as back };
+    const smallPrimary_3: string;
+    export { smallPrimary_3 as smallPrimary };
+    const smallSecondary_3: string;
+    export { smallSecondary_3 as smallSecondary };
+    const smallGhost_3: string;
+    export { smallGhost_3 as smallGhost };
+    const ghost_3: string;
+    export { ghost_3 as ghost };
+    const tertiary_3: string;
+    export { tertiary_3 as tertiary };
+    const danger_3: string;
+    export { danger_3 as danger };
+    const whiteSecondary_3: string;
+    export { whiteSecondary_3 as whiteSecondary };
+    const whitePrimary_3: string;
+    export { whitePrimary_3 as whitePrimary };
+}
+declare namespace height {
+    const primary_4: string;
+    export { primary_4 as primary };
+    const secondary_4: string;
+    export { secondary_4 as secondary };
+    const back_4: string;
+    export { back_4 as back };
+    const smallPrimary_4: string;
+    export { smallPrimary_4 as smallPrimary };
+    const smallSecondary_4: string;
+    export { smallSecondary_4 as smallSecondary };
+    const smallGhost_4: string;
+    export { smallGhost_4 as smallGhost };
+    const ghost_4: string;
+    export { ghost_4 as ghost };
+    const tertiary_4: string;
+    export { tertiary_4 as tertiary };
+    const danger_4: string;
+    export { danger_4 as danger };
+    const whiteSecondary_4: string;
+    export { whiteSecondary_4 as whiteSecondary };
+    const whitePrimary_4: string;
+    export { whitePrimary_4 as whitePrimary };
+}
+declare namespace minWidth {
+    const primary_5: string;
+    export { primary_5 as primary };
+    const secondary_5: string;
+    export { secondary_5 as secondary };
+    const back_5: string;
+    export { back_5 as back };
+    const smallPrimary_5: string;
+    export { smallPrimary_5 as smallPrimary };
+    const smallSecondary_5: string;
+    export { smallSecondary_5 as smallSecondary };
+    const smallGhost_5: string;
+    export { smallGhost_5 as smallGhost };
+    const ghost_5: string;
+    export { ghost_5 as ghost };
+    const tertiary_5: string;
+    export { tertiary_5 as tertiary };
+    const danger_5: string;
+    export { danger_5 as danger };
+    const whiteSecondary_5: string;
+    export { whiteSecondary_5 as whiteSecondary };
+    const whitePrimary_5: string;
+    export { whitePrimary_5 as whitePrimary };
+}
+declare namespace backgroundColor {
+    const primary_6: string;
+    export { primary_6 as primary };
+    const secondary_6: string;
+    export { secondary_6 as secondary };
+    const back_6: string;
+    export { back_6 as back };
+    const smallPrimary_6: string;
+    export { smallPrimary_6 as smallPrimary };
+    const smallSecondary_6: string;
+    export { smallSecondary_6 as smallSecondary };
+    const smallGhost_6: string;
+    export { smallGhost_6 as smallGhost };
+    const ghost_6: string;
+    export { ghost_6 as ghost };
+    const tertiary_6: string;
+    export { tertiary_6 as tertiary };
+    const danger_6: string;
+    export { danger_6 as danger };
+    const whiteSecondary_6: string;
+    export { whiteSecondary_6 as whiteSecondary };
+    const whitePrimary_6: string;
+    export { whitePrimary_6 as whitePrimary };
+}
+declare namespace border {
+    const primary_7: string;
+    export { primary_7 as primary };
+    const secondary_7: string;
+    export { secondary_7 as secondary };
+    const back_7: string;
+    export { back_7 as back };
+    const smallPrimary_7: string;
+    export { smallPrimary_7 as smallPrimary };
+    const smallSecondary_7: string;
+    export { smallSecondary_7 as smallSecondary };
+    const smallGhost_7: string;
+    export { smallGhost_7 as smallGhost };
+    const ghost_7: string;
+    export { ghost_7 as ghost };
+    const tertiary_7: string;
+    export { tertiary_7 as tertiary };
+    const danger_7: string;
+    export { danger_7 as danger };
+    const whiteSecondary_7: string;
+    export { whiteSecondary_7 as whiteSecondary };
+    const whitePrimary_7: string;
+    export { whitePrimary_7 as whitePrimary };
+}
+declare namespace hoverBackgroundColor {
+    const primary_8: string;
+    export { primary_8 as primary };
+    const secondary_8: string;
+    export { secondary_8 as secondary };
+    const back_8: string;
+    export { back_8 as back };
+    const smallPrimary_8: string;
+    export { smallPrimary_8 as smallPrimary };
+    const smallSecondary_8: string;
+    export { smallSecondary_8 as smallSecondary };
+    const smallGhost_8: string;
+    export { smallGhost_8 as smallGhost };
+    const ghost_8: string;
+    export { ghost_8 as ghost };
+    const tertiary_8: string;
+    export { tertiary_8 as tertiary };
+    const danger_8: string;
+    export { danger_8 as danger };
+    const whiteSecondary_8: string;
+    export { whiteSecondary_8 as whiteSecondary };
+    const whitePrimary_8: string;
+    export { whitePrimary_8 as whitePrimary };
+}
+declare namespace hoverBorderColor {
+    const primary_9: string;
+    export { primary_9 as primary };
+    const secondary_9: string;
+    export { secondary_9 as secondary };
+    const back_9: string;
+    export { back_9 as back };
+    const smallPrimary_9: string;
+    export { smallPrimary_9 as smallPrimary };
+    const smallSecondary_9: string;
+    export { smallSecondary_9 as smallSecondary };
+    const smallGhost_9: string;
+    export { smallGhost_9 as smallGhost };
+    const ghost_9: string;
+    export { ghost_9 as ghost };
+    const tertiary_9: string;
+    export { tertiary_9 as tertiary };
+    const danger_9: string;
+    export { danger_9 as danger };
+    const whiteSecondary_9: string;
+    export { whiteSecondary_9 as whiteSecondary };
+    const whitePrimary_9: string;
+    export { whitePrimary_9 as whitePrimary };
+}
+declare namespace hoverColor {
+    const primary_10: string;
+    export { primary_10 as primary };
+    const secondary_10: string;
+    export { secondary_10 as secondary };
+    const back_10: string;
+    export { back_10 as back };
+    const smallPrimary_10: string;
+    export { smallPrimary_10 as smallPrimary };
+    const smallSecondary_10: string;
+    export { smallSecondary_10 as smallSecondary };
+    const smallGhost_10: string;
+    export { smallGhost_10 as smallGhost };
+    const ghost_10: string;
+    export { ghost_10 as ghost };
+    const tertiary_10: string;
+    export { tertiary_10 as tertiary };
+    const danger_10: string;
+    export { danger_10 as danger };
+    const whiteSecondary_10: string;
+    export { whiteSecondary_10 as whiteSecondary };
+    const whitePrimary_10: string;
+    export { whitePrimary_10 as whitePrimary };
+}
+declare namespace activeBackgroundColor {
+    const primary_11: string;
+    export { primary_11 as primary };
+    const secondary_11: string;
+    export { secondary_11 as secondary };
+    const back_11: string;
+    export { back_11 as back };
+    const smallPrimary_11: string;
+    export { smallPrimary_11 as smallPrimary };
+    const smallSecondary_11: string;
+    export { smallSecondary_11 as smallSecondary };
+    const smallGhost_11: string;
+    export { smallGhost_11 as smallGhost };
+    const ghost_11: string;
+    export { ghost_11 as ghost };
+    const tertiary_11: string;
+    export { tertiary_11 as tertiary };
+    const danger_11: string;
+    export { danger_11 as danger };
+    const whiteSecondary_11: string;
+    export { whiteSecondary_11 as whiteSecondary };
+    const whitePrimary_11: string;
+    export { whitePrimary_11 as whitePrimary };
+}
+declare namespace activeBorderColor {
+    const primary_12: string;
+    export { primary_12 as primary };
+    const secondary_12: string;
+    export { secondary_12 as secondary };
+    const back_12: string;
+    export { back_12 as back };
+    const smallPrimary_12: string;
+    export { smallPrimary_12 as smallPrimary };
+    const smallSecondary_12: string;
+    export { smallSecondary_12 as smallSecondary };
+    const smallGhost_12: string;
+    export { smallGhost_12 as smallGhost };
+    const ghost_12: string;
+    export { ghost_12 as ghost };
+    const tertiary_12: string;
+    export { tertiary_12 as tertiary };
+    const danger_12: string;
+    export { danger_12 as danger };
+    const whiteSecondary_12: string;
+    export { whiteSecondary_12 as whiteSecondary };
+    const whitePrimary_12: string;
+    export { whitePrimary_12 as whitePrimary };
+}
+declare namespace activeColor {
+    const primary_13: string;
+    export { primary_13 as primary };
+    const secondary_13: string;
+    export { secondary_13 as secondary };
+    const back_13: string;
+    export { back_13 as back };
+    const smallPrimary_13: string;
+    export { smallPrimary_13 as smallPrimary };
+    const smallSecondary_13: string;
+    export { smallSecondary_13 as smallSecondary };
+    const smallGhost_13: string;
+    export { smallGhost_13 as smallGhost };
+    const ghost_13: string;
+    export { ghost_13 as ghost };
+    const tertiary_13: string;
+    export { tertiary_13 as tertiary };
+    const danger_13: string;
+    export { danger_13 as danger };
+    const whiteSecondary_13: string;
+    export { whiteSecondary_13 as whiteSecondary };
+    const whitePrimary_13: string;
+    export { whitePrimary_13 as whitePrimary };
+}
+export {};

package/dist/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -0,0 +1,202 @@
+/*
+  For now I'm using string values, eventually shared components library will have its own constants file
+  for colors/values that should be used here instead
+*/
+var padding = {
+    primary: "0.75rem 1.5rem",
+    secondary: "0.75rem 1.5rem",
+    back: "0.75rem 1.5rem",
+    smallPrimary: "0.75rem 1rem",
+    smallSecondary: "0.75rem 1rem",
+    smallGhost: "0",
+    tertiary: "0.75rem 1.5rem",
+    ghost: "0.65rem 0",
+    danger: "0.75rem 1.5rem",
+    whiteSecondary: "0.75rem 2rem",
+    whitePrimary: "1.125rem 0.75rem"
+};
+var color = {
+    primary: "#FFFFFF",
+    secondary: "#15749D",
+    back: "#15749D",
+    smallPrimary: "#FFFFFF",
+    smallSecondary: "#15749D",
+    smallGhost: "#15749D",
+    ghost: "#15749D",
+    tertiary: "#15749D",
+    danger: "#FFFFFF",
+    whiteSecondary: "#FFFFFF",
+    whitePrimary: "#FFFFFF"
+};
+var fontSizeVariant = {
+    primary: "pS",
+    secondary: "pS",
+    back: "pS",
+    smallPrimary: "pS",
+    smallSecondary: "pS",
+    smallGhost: "p",
+    ghost: "pL",
+    tertiary: "pS",
+    danger: "pS",
+    whiteSecondary: "pS",
+    whitePrimary: "pS"
+};
+var fontWeight = {
+    primary: "600",
+    secondary: "600",
+    back: "600",
+    smallPrimary: "600",
+    smallSecondary: "600",
+    smallGhost: "400",
+    ghost: "600",
+    tertiary: "600",
+    danger: "600",
+    whiteSecondary: "600",
+    whitePrimary: "600"
+};
+var height = {
+    primary: "3rem",
+    secondary: "3rem",
+    back: "3rem",
+    smallPrimary: "2.5rem",
+    smallSecondary: "2.5rem",
+    smallGhost: "1.5rem",
+    ghost: "3rem",
+    tertiary: "3rem",
+    danger: "3rem",
+    whiteSecondary: "3rem",
+    whitePrimary: "auto"
+};
+var minWidth = {
+    primary: "130px",
+    secondary: "130px",
+    back: "130px",
+    smallPrimary: "100px",
+    smallSecondary: "100px",
+    smallGhost: "100px",
+    ghost: "130px",
+    tertiary: "130px",
+    danger: "130px",
+    whiteSecondary: "160px",
+    whitePrimary: "130px"
+};
+var backgroundColor = {
+    primary: "#15749D",
+    secondary: "transparent",
+    back: "transparent",
+    smallPrimary: "#15749D",
+    smallSecondary: "transparent",
+    smallGhost: "transparent",
+    ghost: "transparent",
+    tertiary: "transparent",
+    danger: "#ED125F",
+    whiteSecondary: "transparent",
+    whitePrimary: "transparent"
+};
+var border = {
+    primary: "2px solid #15749D",
+    secondary: "2px solid #15749D",
+    back: "2px solid #15749D",
+    smallPrimary: "2px solid #15749D",
+    smallSecondary: "2px solid #15749D",
+    smallGhost: "none",
+    ghost: "none",
+    tertiary: "none",
+    danger: "2px solid #ED125F",
+    whiteSecondary: "2px solid white",
+    whitePrimary: "2px solid transparent"
+};
+var hoverBackgroundColor = {
+    primary: "#116285",
+    secondary: "#DBEAF0",
+    back: "transparent",
+    smallPrimary: "#116285",
+    smallSecondary: "#DBEAF0",
+    smallGhost: "transparent",
+    ghost: "transparent",
+    tertiary: "transparent",
+    danger: "#BA002C",
+    whiteSecondary: "transparent",
+    whitePrimary: "transparent"
+};
+var hoverBorderColor = {
+    primary: "#116285",
+    secondary: "#15749D",
+    back: "#DCEAF1",
+    smallPrimary: "#116285",
+    smallSecondary: "#15749D",
+    smallGhost: "transparent",
+    ghost: "transparent",
+    tertiary: "transparent",
+    danger: "#BA002C",
+    whiteSecondary: "2px solid transparent",
+    whitePrimary: "2px solid transparent"
+};
+var hoverColor = {
+    primary: "#FFFFFF",
+    secondary: "#116285",
+    back: "#116285",
+    smallPrimary: "#FFFFFF",
+    smallSecondary: "#116285",
+    smallGhost: "#116285",
+    ghost: "#116285",
+    tertiary: "#116285",
+    danger: "#FFFFFF",
+    whiteSecondary: "#FFFFFF",
+    whitePrimary: "#FFFFFF"
+};
+var activeBackgroundColor = {
+    primary: "#0E506D",
+    secondary: "#B8D5E1",
+    back: "transparent",
+    smallPrimary: "#0E506D",
+    smallSecondary: "#B8D5E1",
+    smallGhost: "transparent",
+    ghost: "transparent",
+    tertiary: "transparent",
+    danger: "#870000",
+    whiteSecondary: "transparent",
+    whitePrimary: "transparent"
+};
+var activeBorderColor = {
+    primary: "#0E506D",
+    secondary: "#15749D",
+    back: "#0E506D",
+    smallPrimary: "#0E506D",
+    smallSecondary: "#15749D",
+    smallGhost: "transparent",
+    ghost: "transparent",
+    tertiary: "transparent",
+    danger: "#870000",
+    whiteSecondary: "2px solid transparent",
+    whitePrimary: "2px solid transparent"
+};
+var activeColor = {
+    primary: "#FFFFFF",
+    secondary: "#15749D",
+    back: "#0E506D",
+    smallPrimary: "#FFFFFF",
+    smallSecondary: "#0E506D",
+    smallGhost: "#0E506D",
+    ghost: "#0E506D",
+    tertiary: "#0E506D",
+    danger: "#FFFFFF",
+    whiteSecondary: "#FFFFFF",
+    whitePrimary: "#FFFFFF"
+};
+export var fallbackValues = {
+    padding: padding,
+    color: color,
+    fontSizeVariant: fontSizeVariant,
+    fontWeight: fontWeight,
+    height: height,
+    minWidth: minWidth,
+    backgroundColor: backgroundColor,
+    border: border,
+    hoverBackgroundColor: hoverBackgroundColor,
+    hoverBorderColor: hoverBorderColor,
+    hoverColor: hoverColor,
+    activeBackgroundColor: activeBackgroundColor,
+    activeBorderColor: activeBorderColor,
+    activeColor: activeColor
+};

package/dist/src/components/atoms/button-with-action/ButtonWithActionProps.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export default interface ButtonWithActionProps {
+    action?: any;
+    variant?: string;
+    text?: string;
+    textWrap?: boolean;
+    isLoading?: boolean;
+    dataQa?: string;
+    textExtraStyles?: string;
+    contentOverride?: boolean;
+    extraStyles?: string;
+    tabIndex?: number;
+    children?: Array<JSX.Element>;
+}

package/dist/src/components/atoms/button-with-action/ButtonWithActionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/atoms/button-with-action/index.d.ts

@@ -0,0 +1,2 @@
+export default ButtonWithAction;
+import ButtonWithAction from "./ButtonWithAction";

package/dist/src/components/atoms/button-with-action/index.js

@@ -0,0 +1,2 @@
+import ButtonWithAction from "./ButtonWithAction";
+export default ButtonWithAction;