@thecb/components 7.0.0 → 7.1.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.0.0",
+  "version": "7.1.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/WalletIconSmall.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const WalletIconSmall = ({ themeValues }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z"
+        fill={themeValues.singleIconColor}
+      />
+      <mask
+        id="mask0_503_574"
+        style={{ "mask-type": "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="4"
+        width="14"
+        height="12"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_503_574)">
+        <rect width="20" height="20" fill={themeValues.singleIconColor} />
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  WalletIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/icons/index.js

@@ -9,6 +9,7 @@ import PaymentsIconSmall from "./PaymentsIconSmall";
 import PaymentMethodAddIcon from "./PaymentMethodAddIcon";
 import ProfileIconSmall from "./ProfileIconSmall";
 import SettingsIconSmall from "./SettingsIconSmall";
+import WalletIconSmall from "./WalletIconSmall";
 import ChevronIcon from "./ChevronIcon";
 import PropertiesAddIcon from "./PropertiesAddIcon";
 import PropertiesIconSmall from "./PropertiesIconSmall";
@@ -69,6 +70,7 @@ export {
   PaymentMethodAddIcon,
   ProfileIconSmall,
   SettingsIconSmall,
+  WalletIconSmall,
   ChevronIcon,
   PropertiesAddIcon,
   PropertiesIconSmall,

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

@@ -1,13 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1 +0,0 @@
-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

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

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

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

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

@@ -1,231 +0,0 @@
-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

@@ -1 +0,0 @@
-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

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

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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;