@thecb/components 7.3.1 → 7.3.2-beta.2

package/dist/src/components/atoms/add-obligation/AddObligation.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/add-obligation/AddObligation.js

@@ -0,0 +1,21 @@
+import React from "react";
+import ButtonWithAction from "../button-with-action";
+import { Box, Center, Cluster, Cover } from "../layouts";
+import { IconAdd } from "../icons";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { fallbackValues } from "./AddObligation.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { ROYAL_BLUE } from "../../../constants/colors";
+var AddObligation = function (_a) {
+    var text = _a.text, action = _a.action, themeValues = _a.themeValues, extraStyles = _a.extraStyles, textExtraStyles = _a.textExtraStyles;
+    var hoverStyles = "\n  &:hover {\n    .fill { fill: ".concat(themeValues.hoverColor, "; }\n    .stroke { stroke: ").concat(themeValues.hoverColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.hoverColor, "; }\n    span { color: ").concat(themeValues.hoverColor, "; }\n  }");
+    var activeStyles = "\n   &:active {\n     .fill { fill: ".concat(themeValues.activeColor, "; }\n     .stroke { stroke: ").concat(themeValues.activeColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.activeColor, "; }\n    span { color: ").concat(themeValues.activeColor, "; }\n    }");
+    var defaultStyles = "\n      min-height: 0;\n      .fill { fill: ".concat(themeValues.color, "; }\n      .stroke { stroke: ").concat(themeValues.color, "; }\n      &:focus {\n        outline: 3px solid ").concat(ROYAL_BLUE, ";\n        outline-offset: 2px;\n      }\n     ");
+    return (React.createElement(Box, { className: "button", padding: "0", hoverStyles: hoverStyles, activeStyles: activeStyles, extraStyles: defaultStyles, onClick: action, tabIndex: "0" },
+        React.createElement(Cover, { singleChild: true, minHeight: "100%" },
+            React.createElement(Cluster, { justify: "center", align: "center", minHeight: "100%" },
+                React.createElement(IconAdd, null),
+                React.createElement(Center, { intrinsic: true },
+                    React.createElement(ButtonWithAction, { action: action, text: text, variant: "smallGhost", extraStyles: "min-height: 0; ".concat(extraStyles), textExtraStyles: "padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ".concat(FONT_WEIGHT_SEMIBOLD, "; ").concat(textExtraStyles), tabIndex: "-1" }))))));
+};
+export default themeComponent(AddObligation, "AddObligation", fallbackValues);

package/dist/src/components/atoms/add-obligation/AddObligation.stories.d.ts

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

package/dist/src/components/atoms/add-obligation/AddObligation.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import AddObligation from "./AddObligation";
+import page from "../../../../.storybook/page";
+export var addObligation = function () { return (React.createElement(AddObligation, { text: text("text", "Lorem", "props"), extraStyles: text("extraStyles", "", "props"), textExtraStyles: text("textExtraStyles", "", "props") })); };
+var story = page({
+    title: "Components|Atoms/AddObligation",
+    Component: AddObligation
+});
+export default story;

package/dist/src/components/atoms/add-obligation/AddObligation.theme.d.ts

@@ -0,0 +1,9 @@
+export namespace fallbackValues {
+    export { color };
+    export { hoverColor };
+    export { activeColor };
+}
+declare const color: "#15749D";
+declare const hoverColor: "#116285";
+declare const activeColor: "#0E506D";
+export {};

package/dist/src/components/atoms/add-obligation/AddObligation.theme.js

@@ -0,0 +1,8 @@
+var color = "#15749D";
+var hoverColor = "#116285";
+var activeColor = "#0E506D";
+export var fallbackValues = {
+    color: color,
+    hoverColor: hoverColor,
+    activeColor: activeColor
+};

package/dist/src/components/atoms/add-obligation/index.d.ts

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

package/dist/src/components/atoms/add-obligation/index.js

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

package/dist/src/components/atoms/alert/Alert.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/alert/Alert.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { AlertIcons, IconQuit } from "../../../deprecated/icons";
+import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
+import Text from "../text";
+import { fallbackValues } from "./Alert.theme";
+import { themeComponent } from "../../../util/themeUtils";
+var Alert = function (_a) {
+    var heading = _a.heading, text = _a.text, textOverride = _a.textOverride, variant = _a.variant, children = _a.children, height = _a.height, onLinkClick = _a.onLinkClick, _b = _a.padding, padding = _b === void 0 ? "0.5rem" : _b, _c = _a.showQuitLink, showQuitLink = _c === void 0 ? true : _c, themeValues = _a.themeValues, extraStyles = _a.extraStyles, maxContentWidth = _a.maxContentWidth;
+    var Icon = AlertIcons[variant];
+    var content = (React.createElement(Sidebar, { width: "24px", childGap: "0rem" },
+        React.createElement(Box, { padding: "0 0 0 1rem", minHeight: "100%" },
+            React.createElement(Cover, { minHeight: "100%", singleChild: true },
+                React.createElement(Box, { padding: "0", width: "1.5rem", minHeight: "1.5rem" },
+                    React.createElement(Icon, null)))),
+        React.createElement(Box, { padding: "0" },
+            React.createElement(Sidebar, { sidebarOnRight: true, width: "24px", childGap: "0rem" },
+                React.createElement(Box, { padding: maxContentWidth ? "".concat(padding, " 1rem") : "1rem" },
+                    React.createElement(Cluster, { justify: "flex-start", align: "center" }, textOverride ? (textOverride) : (React.createElement(Stack, { fullHeight: true, childGap: "0.25rem" },
+                        React.createElement(Text, { variant: "p", color: themeValues.text, weight: "600" }, heading),
+                        React.createElement(Text, { variant: "pS", color: themeValues.text }, text),
+                        children)))),
+                React.createElement(Cluster, { justify: "flex-end", align: "flex-start" }, showQuitLink && (React.createElement(Box, { padding: "0", minHeight: "100%", onClick: onLinkClick },
+                    React.createElement(IconQuit, null))))))));
+    return (React.createElement(Box, { padding: padding, width: "100%", minHeight: height && parseInt(height) < 100 ? height : "100px", height: height ? height : "auto", background: themeValues.background, borderRadius: "4px", borderColor: themeValues.border, borderSize: "1px", extraStyles: extraStyles }, maxContentWidth ? (React.createElement(Center, { maxWidth: maxContentWidth }, content)) : (content)));
+};
+export default themeComponent(Alert, "Alert", fallbackValues, "info");

package/dist/src/components/atoms/alert/Alert.stories.d.ts

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

package/dist/src/components/atoms/alert/Alert.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import Alert from "./Alert";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    info: "info",
+    warn: "warn",
+    error: "error",
+    success: "success"
+};
+var defaultValue = "info";
+var groupId = "props";
+export var alert = function () { return (React.createElement(Alert, { variant: select(variantsLabel, variants, defaultValue, groupId), text: text("text", "Alert Bar", "props"), showQuitLink: boolean("showQuitLink", true, "props") })); };
+var story = page({
+    title: "Components|Atoms/Alert",
+    Component: Alert
+});
+export default story;

package/dist/src/components/atoms/alert/Alert.theme.d.ts

@@ -0,0 +1,65 @@
+export namespace fallbackValues {
+    export { background };
+    export { border };
+    export { iconBackground };
+    export { iconFill };
+    export { text };
+    export { link };
+}
+declare namespace background {
+    const info: string;
+    const warn: string;
+    const error: string;
+    const success: string;
+}
+declare namespace border {
+    const info_1: string;
+    export { info_1 as info };
+    const warn_1: string;
+    export { warn_1 as warn };
+    const error_1: string;
+    export { error_1 as error };
+    const success_1: string;
+    export { success_1 as success };
+}
+declare namespace iconBackground {
+    const info_2: string;
+    export { info_2 as info };
+    const warn_2: string;
+    export { warn_2 as warn };
+    const error_2: string;
+    export { error_2 as error };
+    const success_2: string;
+    export { success_2 as success };
+}
+declare namespace iconFill {
+    const info_3: string;
+    export { info_3 as info };
+    const warn_3: string;
+    export { warn_3 as warn };
+    const error_3: string;
+    export { error_3 as error };
+    const success_3: string;
+    export { success_3 as success };
+}
+declare namespace text {
+    const info_4: string;
+    export { info_4 as info };
+    const warn_4: string;
+    export { warn_4 as warn };
+    const error_4: string;
+    export { error_4 as error };
+    const success_4: string;
+    export { success_4 as success };
+}
+declare namespace link {
+    const info_5: string;
+    export { info_5 as info };
+    const warn_5: string;
+    export { warn_5 as warn };
+    const error_5: string;
+    export { error_5 as error };
+    const success_5: string;
+    export { success_5 as success };
+}
+export {};

package/dist/src/components/atoms/alert/Alert.theme.js

@@ -0,0 +1,45 @@
+import { APRICOT_ORANGE, INFO_BLUE, BLUSH_RED, HINT_GREEN, ZEST_ORANGE, MATISSE_BLUE, RAZZMATAZZ_RED, EMERALD_GREEN, MUSTARD_YELLOW, ONAHAU_BLUE, COSMOS_RED, ICE_GREEN, CARROT_ORANGE, CONGRESS_BLUE, THUNDERBIRD_RED, HAZE_GREEN, ZODIAC_BLUE, SCIENCE_BLUE } from "../../../constants/colors";
+var background = {
+    info: "".concat(INFO_BLUE),
+    warn: "".concat(APRICOT_ORANGE),
+    error: "".concat(BLUSH_RED),
+    success: "".concat(HINT_GREEN)
+};
+var border = {
+    info: "".concat(MATISSE_BLUE),
+    warn: "".concat(ZEST_ORANGE),
+    error: "".concat(RAZZMATAZZ_RED),
+    success: "".concat(EMERALD_GREEN)
+};
+var iconBackground = {
+    info: "".concat(ONAHAU_BLUE),
+    warn: "".concat(MUSTARD_YELLOW),
+    error: "".concat(COSMOS_RED),
+    success: "".concat(ICE_GREEN)
+};
+var iconFill = {
+    info: "".concat(CONGRESS_BLUE),
+    warn: "".concat(CARROT_ORANGE),
+    error: "".concat(THUNDERBIRD_RED),
+    success: "".concat(HAZE_GREEN)
+};
+var text = {
+    info: "".concat(ZODIAC_BLUE),
+    warn: "".concat(ZODIAC_BLUE),
+    error: "".concat(ZODIAC_BLUE),
+    success: "".concat(ZODIAC_BLUE)
+};
+var link = {
+    info: "".concat(SCIENCE_BLUE),
+    warn: "".concat(SCIENCE_BLUE),
+    error: "".concat(SCIENCE_BLUE),
+    success: "".concat(SCIENCE_BLUE)
+};
+export var fallbackValues = {
+    background: background,
+    border: border,
+    iconBackground: iconBackground,
+    iconFill: iconFill,
+    text: text,
+    link: link
+};

package/dist/src/components/atoms/alert/index.d.ts

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

package/dist/src/components/atoms/alert/index.js

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

package/dist/src/components/atoms/amount-callout/AmountCallout.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/amount-callout/AmountCallout.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Title from "../title";
+import { Box } from "../layouts";
+import { fallbackValues } from "./AmountCallout.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+var AmountCallout = function (_a) {
+    var amount = _a.amount, textAlign = _a.textAlign, themeValues = _a.themeValues;
+    return (React.createElement(Box, { padding: "0", textAlign: textAlign },
+        React.createElement(Title, { variant: "small", weight: FONT_WEIGHT_SEMIBOLD, color: themeValues.color, as: "p" }, amount)));
+};
+export default themeComponent(AmountCallout, "AmountCallout", fallbackValues);

package/dist/src/components/atoms/amount-callout/AmountCallout.stories.d.ts

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

package/dist/src/components/atoms/amount-callout/AmountCallout.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import AmountCallout from "./AmountCallout";
+import page from "../../../../.storybook/page";
+var textAlignLabel = "textAlign";
+var textAlign = {
+    left: "left",
+    center: "center",
+    right: "right"
+};
+var defaultTextAlignValue = "left";
+var groupId = "props";
+export var amountCallout = function () { return (React.createElement(AmountCallout, { amount: text("text", "$1.23", "props"), textAlign: select(textAlignLabel, textAlign, defaultTextAlignValue, groupId) })); };
+var story = page({
+    title: "Components|Atoms/AmountCallout",
+    Component: AmountCallout
+});
+export default story;

package/dist/src/components/atoms/amount-callout/AmountCallout.theme.d.ts

@@ -0,0 +1,5 @@
+export namespace fallbackValues {
+    export { color };
+}
+declare const color: "#292A33";
+export {};

package/dist/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -0,0 +1,4 @@
+var color = "#292A33";
+export var fallbackValues = {
+    color: color
+};

package/dist/src/components/atoms/amount-callout/index.d.ts

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

package/dist/src/components/atoms/amount-callout/index.js

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

package/dist/src/components/atoms/box-with-shadow/BoxWithShadow.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/box-with-shadow/BoxWithShadow.js

@@ -0,0 +1,43 @@
+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 from "react";
+import { rgba } from "polished";
+import { fallbackValues } from "./BoxWithShadow.theme";
+import Box from "../layouts/Box";
+import { themeComponent } from "../../../util/themeUtils";
+import { BLACK } from "../../../constants/colors";
+var BoxWithShadow = function (_a) {
+    var variant = _a.variant, themeValues = _a.themeValues, children = _a.children, props = __rest(_a, ["variant", "themeValues", "children"]);
+    var shadowRegistry = {
+        baseStandard: "0px 3px 7px 2px ".concat(rgba(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba(BLACK, 0.1), ";"),
+        baseHover: "0px 1px 7px 0px ".concat(rgba(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba(BLACK, 0.2), ";"),
+        baseClick: "0px 4px 7px 0px ".concat(rgba(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba(BLACK, 0.2), ";"),
+        insetStandard: "0px 1px 4px 2px ".concat(rgba(BLACK, 0.1), ", 0px 2px 1px 0px ").concat(rgba(BLACK, 0.15), ";"),
+        insetHover: "0px 1px 4px 0px ".concat(rgba(BLACK, 0.3), ", 0px 1px 2px 2px ").concat(rgba(BLACK, 0.2), ", 0px 4px 8px 0px ").concat(rgba(BLACK, 0.2), ";"),
+        insetClick: "0px 4px 4px 0px ".concat(rgba(BLACK, 0.3), ", 0px 1px 2px 2px ").concat(rgba(BLACK, 0.2), ", 0px 4px 8px 0px ").concat(rgba(BLACK, 0.2), ";"),
+        linkShadowFocus: "0px 0px 5px 2px ".concat(rgba(themeValues.linkColor, 0.3), ", 0px 1px 2px 0px ").concat(rgba(themeValues.linkColor, 0.3), ", 0px 4px 8px 0px ").concat(rgba(themeValues.linkColor, 0.2), ";"),
+        overlayShadow: "0px 1px 8px -1px ".concat(rgba(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba(BLACK, 0.2), ", 0px 7px 32px 0px ").concat(rgba(BLACK, 0.2), ";")
+    };
+    return (React.createElement(Box, __assign({ boxShadow: shadowRegistry[variant] }, props), children));
+};
+export default themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues);

package/dist/src/components/atoms/box-with-shadow/BoxWithShadow.theme.d.ts

@@ -0,0 +1,5 @@
+export namespace fallbackValues {
+    export { linkColor };
+}
+declare const linkColor: "#15749D";
+export {};

package/dist/src/components/atoms/box-with-shadow/BoxWithShadow.theme.js

@@ -0,0 +1,5 @@
+import { MATISSE_BLUE } from "../../../constants/colors";
+var linkColor = MATISSE_BLUE;
+export var fallbackValues = {
+    linkColor: linkColor
+};

package/dist/src/components/atoms/box-with-shadow/index.d.ts

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

package/dist/src/components/atoms/box-with-shadow/index.js

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

package/dist/src/components/atoms/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+export default Breadcrumbs;
+declare function Breadcrumbs({ breadcrumbsList }: {
+    breadcrumbsList?: any[] | undefined;
+}): JSX.Element;

package/dist/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -0,0 +1,22 @@
+import React, { Fragment, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { IconChevron } from "../../../deprecated/icons";
+import { createThemeValues } from "../../../util/themeUtils";
+import { fallbackValues } from "./Breadcrumb.theme";
+import { InternalLink } from "../link";
+import Cluster from "../layouts/Cluster";
+import Box from "../layouts/Box";
+var Breadcrumbs = function (_a) {
+    var _b = _a.breadcrumbsList, breadcrumbsList = _b === void 0 ? [] : _b;
+    var themeContext = useContext(ThemeContext);
+    var themeValues = createThemeValues(themeContext, fallbackValues, "Breadcrumb");
+    return (React.createElement(Box, { padding: "0", as: "nav", "aria-label": "Breadcrumb navigation" },
+        React.createElement(Cluster, { justify: "flex-start", align: "center" }, breadcrumbsList.map(function (_a, index) {
+            var linkText = _a.linkText, linkDestination = _a.linkDestination, isActive = _a.isActive;
+            return (React.createElement(Fragment, { key: "breadcrumb-".concat(linkText) },
+                React.createElement(InternalLink, { "aria-current": index === breadcrumbsList.length - 1 ? "location" : "", to: linkDestination, active: isActive.toString(), color: themeValues.color, fontSize: themeValues.fontSize, lineheight: themeValues.lineHeight, fontWeight: themeValues.fontWeight, margin: themeValues.margin, extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" &&
+                        "pointer-events: none;\n                             color: ".concat(themeValues.activeBreadcrumbColor, ";\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, "; \n                          }") }, linkText),
+                index < breadcrumbsList.length - 1 ? (React.createElement(IconChevron, null)) : (React.createElement(Fragment, null))));
+        }))));
+};
+export default Breadcrumbs;

package/dist/src/components/atoms/breadcrumb/Breadcrumb.stories.d.ts

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

package/dist/src/components/atoms/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,37 @@
+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);
+};
+import React from "react";
+import { object } from "@storybook/addon-knobs";
+import Breadcrumb from "./Breadcrumb";
+import page from "../../../../.storybook/page";
+var labelInactive = "Inactive Breadcrumb";
+var defaultInactiveValue = {
+    linkText: "Home",
+    linkDestination: location.pathname,
+    isActive: false
+};
+var labelActive = "Active Breadcrumb";
+var defaultActiveValue = {
+    linkText: "Page",
+    linkDestination: location.pathname,
+    isActive: true
+};
+var groupId = "props";
+export var breadcrumb = function () { return (React.createElement(Breadcrumb, { breadcrumbsList: [
+        __assign({}, object(labelInactive, defaultInactiveValue, groupId)),
+        __assign({}, object(labelActive, defaultActiveValue, groupId))
+    ] })); };
+var story = page({
+    title: "Components|Atoms/Breadcrumb",
+    Component: Breadcrumb
+});
+export default story;

package/dist/src/components/atoms/breadcrumb/Breadcrumb.theme.d.ts

@@ -0,0 +1,19 @@
+export namespace fallbackValues {
+    export { color };
+    export { activeColor };
+    export { activeBreadcrumbColor };
+    export { fontSize };
+    export { lineHeight };
+    export { fontWeight };
+    export { margin };
+    export { hover };
+}
+declare const color: string;
+declare const activeColor: string;
+declare const activeBreadcrumbColor: string;
+declare const fontSize: "0.875rem";
+declare const lineHeight: "1.25rem";
+declare const fontWeight: "400";
+declare const margin: "0.5rem";
+declare const hover: "text-decoration: none;";
+export {};

package/dist/src/components/atoms/breadcrumb/Breadcrumb.theme.js

@@ -0,0 +1,24 @@
+// import theme from "styled-theming";
+import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
+/*
+  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 color = "".concat(MATISSE_BLUE);
+var activeColor = "".concat(STORM_GREY);
+var activeBreadcrumbColor = "".concat(STORM_GREY);
+var fontSize = "0.875rem";
+var lineHeight = "1.25rem";
+var fontWeight = "400";
+var margin = "0.5rem";
+var hover = "text-decoration: none;";
+export var fallbackValues = {
+    color: color,
+    activeColor: activeColor,
+    activeBreadcrumbColor: activeBreadcrumbColor,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    margin: margin,
+    hover: hover
+};

package/dist/src/components/atoms/breadcrumb/index.d.ts

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

package/dist/src/components/atoms/breadcrumb/index.js

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

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

@@ -0,0 +1,15 @@
+export default ButtonWithAction;
+declare function ButtonWithAction({ action, variant, text, textWrap, isLoading, dataQa, textExtraStyles, contentOverride, extraStyles, tabIndex, children, ...rest }: {
+    [x: string]: any;
+    action?: (() => void) | undefined;
+    variant?: string | undefined;
+    text: any;
+    textWrap?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    dataQa?: null | undefined;
+    textExtraStyles: any;
+    contentOverride?: boolean | undefined;
+    extraStyles?: string | undefined;
+    tabIndex: any;
+    children: any;
+}): JSX.Element;