@thecb/components 6.2.9 → 6.3.0-beta.2

package/dist/src/components/molecules/module/Module.js

@@ -0,0 +1,31 @@
+import React, { Fragment, memo } from "react";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./Module.theme";
+import Title from "../../atoms/title";
+import { Box } from "../../atoms/layouts";
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+var Module = function (_a) {
+    var heading = _a.heading, _b = _a.spacing, spacing = _b === void 0 ? "1rem" : _b, _c = _a.padding, padding = _c === void 0 ? "0" : _c, _d = _a.spacingBottom, spacingBottom = _d === void 0 ? "2.5rem" : _d, themeValues = _a.themeValues, _e = _a.variant, variant = _e === void 0 ? "default" : _e, fontSize = _a.fontSize, as = _a.as, children = _a.children;
+    var themedFontSize = variant === "small"
+        ? "1.25rem"
+        : variant === "default"
+            ? "1.375rem"
+            : "2rem";
+    var computedFontSize = fontSize || themedFontSize;
+    var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+    var computedElemType = as || themedElemType;
+    return (React.createElement(Fragment, null,
+        heading && (React.createElement(Title, { weight: themeValues.fontWeight, color: themeValues.fontColor, margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"), textAlign: themeValues.textAlign, as: computedElemType, extraStyles: "font-size: ".concat(computedFontSize, ";") }, heading)),
+        React.createElement(Box, { padding: "0 0 ".concat(spacingBottom) },
+            React.createElement(Box, { padding: padding, background: themeValues.backgroundColor, borderRadius: themeValues.borderRadius, boxShadow: themeValues.boxShadow }, children))));
+};
+export default memo(themeComponent(Module, "Module", fallbackValues, "default"));

package/dist/src/components/molecules/module/Module.stories.d.ts

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

package/dist/src/components/molecules/module/Module.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import Module from "./Module";
+import page from "../../../../.storybook/page";
+var variantsLabel = "variant";
+var variants = {
+    default: "default",
+    largeTitle: "largeTitle",
+    None: undefined
+};
+var defaultValue = "default";
+var groupId = "props";
+export var module = function () { return (React.createElement(Module, { variant: select(variantsLabel, variants, defaultValue, groupId), heading: text("heading", "Module Title", groupId), spacing: text("spacing", "1rem", groupId), padding: text("padding", "1rem", groupId), spacingBottom: text("spacingBottom", "2.5rem", groupId) }, text("child components", "child components go here", groupId))); };
+var story = page({
+    title: "Components|Atoms/Module",
+    Component: Module
+});
+export default story;

package/dist/src/components/molecules/module/Module.theme.d.ts

@@ -0,0 +1,87 @@
+export namespace fallbackValues {
+    export { fontSize };
+    export { fontWeight };
+    export { fontColor };
+    export { lineHeight };
+    export { textAlign };
+    export { titleType };
+    export { titleSpacing };
+    export { boxShadow };
+    export { borderRadius };
+    export { backgroundColor };
+}
+declare namespace fontSize {
+    const _default: string;
+    export { _default as default };
+    export const largeTitle: string;
+    export const small: string;
+}
+declare namespace fontWeight {
+    const _default_1: string;
+    export { _default_1 as default };
+    const largeTitle_1: string;
+    export { largeTitle_1 as largeTitle };
+    const small_1: string;
+    export { small_1 as small };
+}
+declare namespace fontColor {
+    export { CHARADE_GREY as default };
+    export { CHARADE_GREY as largeTitle };
+    export { CHARADE_GREY as small };
+}
+declare namespace lineHeight {
+    const _default_2: string;
+    export { _default_2 as default };
+    const largeTitle_2: string;
+    export { largeTitle_2 as largeTitle };
+    const small_2: string;
+    export { small_2 as small };
+}
+declare namespace textAlign {
+    const _default_3: string;
+    export { _default_3 as default };
+    const largeTitle_3: string;
+    export { largeTitle_3 as largeTitle };
+    const small_3: string;
+    export { small_3 as small };
+}
+declare namespace titleType {
+    const _default_4: string;
+    export { _default_4 as default };
+    const largeTitle_4: string;
+    export { largeTitle_4 as largeTitle };
+    const small_4: string;
+    export { small_4 as small };
+}
+declare namespace titleSpacing {
+    const _default_5: string;
+    export { _default_5 as default };
+    const largeTitle_5: string;
+    export { largeTitle_5 as largeTitle };
+    const small_5: string;
+    export { small_5 as small };
+}
+declare namespace boxShadow {
+    const _default_6: string;
+    export { _default_6 as default };
+    const largeTitle_6: string;
+    export { largeTitle_6 as largeTitle };
+    const small_6: string;
+    export { small_6 as small };
+}
+declare namespace borderRadius {
+    const _default_7: string;
+    export { _default_7 as default };
+    const largeTitle_7: string;
+    export { largeTitle_7 as largeTitle };
+    const small_7: string;
+    export { small_7 as small };
+}
+declare namespace backgroundColor {
+    export { WHITE as default };
+    export { WHITE as largeTitle };
+    export { WHITE as small };
+}
+import { CHARADE_GREY } from "../../../constants/colors";
+import { WHITE } from "../../../constants/colors";
+export {};

package/dist/src/components/molecules/module/Module.theme.js

@@ -0,0 +1,43 @@
+import { WHITE, CHARADE_GREY } from "../../../constants/colors";
+var fontSize = {
+    default: "1.375rem",
+    largeTitle: "1.75rem",
+    small: "1.25rem"
+};
+var fontWeight = { default: "600", largeTitle: "700", small: "600" };
+var fontColor = {
+    default: CHARADE_GREY,
+    largeTitle: CHARADE_GREY,
+    small: CHARADE_GREY
+};
+var lineHeight = { default: "2rem", largeTitle: "2rem", small: "2rem" };
+var textAlign = { default: "left", largeTitle: "left", small: "left" };
+var titleType = { default: "h5", largeTitle: "h1", small: "h6" };
+var titleSpacing = {
+    default: "0.5rem",
+    largeTitle: "1.125rem",
+    small: "0.5rem"
+};
+var boxShadow = {
+    default: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+};
+var borderRadius = {
+    default: "0.25rem",
+    largeTitle: "0.25rem",
+    small: "0.25rem"
+};
+var backgroundColor = { default: WHITE, largeTitle: WHITE, small: WHITE };
+export var fallbackValues = {
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    fontColor: fontColor,
+    lineHeight: lineHeight,
+    textAlign: textAlign,
+    titleType: titleType,
+    titleSpacing: titleSpacing,
+    boxShadow: boxShadow,
+    borderRadius: borderRadius,
+    backgroundColor: backgroundColor
+};

package/dist/src/components/molecules/module/index.d.ts

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

package/dist/src/components/molecules/module/index.js

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

package/dist/src/components/molecules/nav-menu/NavMenu.theme.d.ts

@@ -0,0 +1,15 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { shadowColor };
+}
+declare namespace backgroundColor {
+    const profile: string;
+    const cms: string;
+}
+declare namespace shadowColor {
+    const profile_1: string;
+    export { profile_1 as profile };
+    const cms_1: string;
+    export { cms_1 as cms };
+}
+export {};

package/dist/src/components/molecules/nav-menu/NavMenu.theme.js

@@ -0,0 +1,12 @@
+var backgroundColor = {
+    profile: "#3b414d",
+    cms: "#3b414d"
+};
+var shadowColor = {
+    profile: "#292A33",
+    cms: "#292A33"
+};
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    shadowColor: shadowColor
+};

package/dist/src/components/molecules/nav-menu/NavMenuDesktop.d.ts

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

package/dist/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Box, Imposter } from "../../atoms/layouts";
+import { fallbackValues } from "./NavMenu.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+var NavMenuDesktop = function (_a) {
+    var id = _a.id, _b = _a.top, top = _b === void 0 ? "115%" : _b, _c = _a.left, left = _c === void 0 ? "-165%" : _c, _d = _a.menuContent, menuContent = _d === void 0 ? [] : _d, _e = _a.visible, visible = _e === void 0 ? true : _e, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onFocus = _a.onFocus, onBlur = _a.onBlur, themeValues = _a.themeValues;
+    var menuCarat = "&:after { bottom: 100%; right: 10px; border: solid transparent; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ".concat(themeValues.backgroundColor, "00; border-bottom-color: ").concat(themeValues.backgroundColor, "; border-width: 10px; margin-left: -10px; }");
+    return (React.createElement(Imposter, { id: id, breakout: true, top: top, left: left, visible: visible },
+        React.createElement(Box, { minWidth: "240px", padding: "1rem 0.5rem", extraStyles: "position: relative; ".concat(menuCarat), background: themeValues.backgroundColor, borderRadius: "5px", boxShadow: "0px 1px 8px -1px rgba(0, 0, 0, 0.3), 0px 1px 4px 0px ".concat(themeValues.shadowColor, ", 0px 7px 32px 0px ").concat(themeValues.shadowColor), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, menuContent)));
+};
+export default themeComponent(NavMenuDesktop, "NavMenu", fallbackValues, "profile");

package/dist/src/components/molecules/nav-menu/NavMenuMobile.d.ts

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

package/dist/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -0,0 +1,49 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from "react";
+import styled from "styled-components";
+import posed from "react-pose";
+import { easeIn, easeOut } from "@popmotion/easing";
+import { Box } from "../../atoms/layouts";
+import { fallbackValues } from "./NavMenu.theme.js";
+import { themeComponent } from "../../../util/themeUtils";
+var menu = posed.div({
+    invisible: {
+        left: "-100vw",
+        right: "100vw",
+        transition: {
+            right: {
+                ease: easeOut,
+                duration: 500
+            },
+            left: {
+                ease: easeOut,
+                duration: 500
+            }
+        }
+    },
+    visible: {
+        left: "0",
+        right: "0",
+        transition: {
+            left: {
+                ease: easeIn,
+                duration: 500
+            },
+            right: {
+                ease: easeIn,
+                duration: 500
+            }
+        }
+    }
+});
+var ImposterMenu = styled(menu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 72px;\n"], ["\n  position: fixed;\n  top: 72px;\n"])));
+var NavMenuMobile = function (_a) {
+    var id = _a.id, _b = _a.menuContent, menuContent = _b === void 0 ? [] : _b, _c = _a.visible, visible = _c === void 0 ? false : _c, themeValues = _a.themeValues;
+    return (React.createElement(ImposterMenu, { id: id, initialPose: "invisible", pose: visible ? "visible" : "invisible" },
+        React.createElement(Box, { width: "100vw", padding: "1rem 0.5rem", extraStyles: "position: relative; max-width: 400px; height: calc(100vh - 72px);", background: themeValues.backgroundColor }, menuContent)));
+};
+export default themeComponent(NavMenuMobile, "NavMenu", fallbackValues, "profile");
+var templateObject_1;

package/dist/src/components/molecules/nav-menu/index.d.ts

@@ -0,0 +1,3 @@
+import NavMenuDesktop from "./NavMenuDesktop";
+import NavMenuMobile from "./NavMenuMobile";
+export { NavMenuDesktop, NavMenuMobile };

package/dist/src/components/molecules/nav-menu/index.js

@@ -0,0 +1,3 @@
+import NavMenuDesktop from "./NavMenuDesktop";
+import NavMenuMobile from "./NavMenuMobile";
+export { NavMenuDesktop, NavMenuMobile };

package/dist/src/components/molecules/obligation/Obligation.d.ts

@@ -0,0 +1,23 @@
+export default Obligation;
+declare function Obligation({ config, obligations, actions, autoPayEnabled, autoPayAvailable, handleAutopayAction, deactivatePaymentSchedule, autoPaySchedule, paymentPlanSchedule, navigateToSettings, isMobile, isPaymentPlan, nextAutopayDate, obligationAssocID, dueDate, agencyName, inactive, inactiveLookupTitle, inactiveLookupInput, inactiveLookupValue }: {
+    config: any;
+    obligations: any;
+    actions: any;
+    autoPayEnabled: any;
+    autoPayAvailable: any;
+    handleAutopayAction: any;
+    deactivatePaymentSchedule: any;
+    autoPaySchedule: any;
+    paymentPlanSchedule: any;
+    navigateToSettings: any;
+    isMobile: any;
+    isPaymentPlan: any;
+    nextAutopayDate: any;
+    obligationAssocID: any;
+    dueDate: any;
+    agencyName: any;
+    inactive?: boolean | undefined;
+    inactiveLookupTitle?: string | undefined;
+    inactiveLookupInput?: string | undefined;
+    inactiveLookupValue?: string | undefined;
+}): JSX.Element;

package/dist/src/components/molecules/obligation/Obligation.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
+import { WHITE, BRIGHT_GREY, ATHENS_GREY, GRECIAN_GREY } from "../../../constants/colors";
+import { IconModule, TitleModule, AmountModule, PaymentDetailsActions, InactiveControlsModule, InactiveTitleModule } from "./modules";
+var Obligation = function (_a) {
+    var _b, _c, _d;
+    var config = _a.config, obligations = _a.obligations, actions = _a.actions, autoPayEnabled = _a.autoPayEnabled, autoPayAvailable = _a.autoPayAvailable, handleAutopayAction = _a.handleAutopayAction, deactivatePaymentSchedule = _a.deactivatePaymentSchedule, autoPaySchedule = _a.autoPaySchedule, paymentPlanSchedule = _a.paymentPlanSchedule, navigateToSettings = _a.navigateToSettings, isMobile = _a.isMobile, isPaymentPlan = _a.isPaymentPlan, nextAutopayDate = _a.nextAutopayDate, obligationAssocID = _a.obligationAssocID, dueDate = _a.dueDate, agencyName = _a.agencyName, _e = _a.inactive, inactive = _e === void 0 ? false : _e, _f = _a.inactiveLookupTitle, inactiveLookupTitle = _f === void 0 ? "" : _f, _g = _a.inactiveLookupInput, inactiveLookupInput = _g === void 0 ? "Account" : _g, _h = _a.inactiveLookupValue, inactiveLookupValue = _h === void 0 ? "" : _h;
+    /*
+      The value of obligations is always an array. It can contain:
+        - A single obligation
+        - A group of obligations (a "collection")
+      
+      The top level desc/subdesc for all obligations in a collection is the same
+      (Collection accounts look different in the Account Details page)
+    */
+    var firstObligation = obligations[0];
+    var customAttributes = (_b = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _b !== void 0 ? _b : {};
+    var boxShadowValue = "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+    var activeObligation = (React.createElement(Box, { padding: "0", borderRadius: "4px", boxShadow: boxShadowValue, as: "section", "aria-label": "".concat((_c = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _c !== void 0 ? _c : "account", " ").concat((_d = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _d !== void 0 ? _d : obligationAssocID), border: "1px solid ".concat(GRECIAN_GREY), borderWidthOverride: "1px 0 0 0" },
+        React.createElement(Box, { background: WHITE, padding: isMobile ? "16px" : "24px 16px" },
+            React.createElement(Stack, { childGap: "14px" },
+                React.createElement(Box, { key: "".concat(firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.id, "-top"), padding: "0 8px", minWidth: "100%" },
+                    React.createElement(Cluster, { justify: "space-between", align: "center", childGap: "4px", nowrap: true },
+                        React.createElement(Box, { padding: "0" },
+                            React.createElement(Cluster, { justify: "flex-start", align: "center" },
+                                !isMobile && (React.createElement(IconModule, { icon: config.icon, iconDefault: config.iconDefault, configIconMap: config.iconMap, iconValue: config.iconValue, customAttributes: customAttributes })),
+                                React.createElement(TitleModule, { title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description, subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription, titleColor: BRIGHT_GREY, isMobile: isMobile }))),
+                        !isMobile && (React.createElement(AmountModule, { totalAmountDue: obligations === null || obligations === void 0 ? void 0 : obligations.reduce(function (acc, curr) { return acc + curr.amountDue; }, 0), autoPayEnabled: autoPayEnabled, isMobile: isMobile, deactivatePaymentSchedule: deactivatePaymentSchedule, navigateToSettings: navigateToSettings, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate })))),
+                !isMobile && (React.createElement(PaymentDetailsActions, { obligations: obligations, autoPayEnabled: autoPayEnabled, autoPayAvailable: autoPayAvailable, handleAutopayAction: handleAutopayAction, deactivatePaymentSchedule: deactivatePaymentSchedule, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, navigateToSettings: navigateToSettings, config: config, actions: actions, isMobile: isMobile, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate, obligationAssocID: obligationAssocID })))),
+        isMobile && (React.createElement(PaymentDetailsActions, { obligations: obligations, autoPayEnabled: autoPayEnabled, autoPayAvailable: autoPayAvailable, handleAutopayAction: handleAutopayAction, deactivatePaymentSchedule: deactivatePaymentSchedule, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, navigateToSettings: navigateToSettings, config: config, actions: actions, isMobile: isMobile, isPaymentPlan: isPaymentPlan, nextAutopayDate: nextAutopayDate, obligationAssocID: obligationAssocID }))));
+    var inactiveObligation = (React.createElement(Box, { padding: "0", borderRadius: "4px", boxShadow: boxShadowValue, as: "section", "aria-label": "".concat(inactiveLookupTitle, " ").concat(inactiveLookupInput, ": ").concat(inactiveLookupValue) },
+        React.createElement(Box, { background: ATHENS_GREY, padding: isMobile ? "16px" : "24px" },
+            React.createElement(Stack, { childGap: "14px" },
+                React.createElement(Box, { key: "".concat(obligationAssocID, "-top"), padding: "0", minWidth: "100%" },
+                    React.createElement(Cluster, { justify: "space-between", align: "center", childGap: "40px", nowrap: true },
+                        React.createElement(Box, { padding: "0" },
+                            React.createElement(Cluster, { justify: "flex-start", align: "center", nowrap: true },
+                                React.createElement(IconModule, { icon: config.icon, iconDefault: config.iconDefault, configIconMap: config.iconMap, iconValue: config.iconValue, customAttributes: customAttributes }),
+                                React.createElement(InactiveTitleModule, { title: inactiveLookupTitle, subtitle: "".concat(inactiveLookupInput, ": ").concat(inactiveLookupValue), titleColor: BRIGHT_GREY, autoPayEnabled: autoPayEnabled, isMobile: isMobile }))),
+                        !isMobile && (React.createElement(InactiveControlsModule, { obligations: obligations, autoPayEnabled: autoPayEnabled, deactivatePaymentSchedule: deactivatePaymentSchedule, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, config: config, actions: actions, isMobile: isMobile, nextAutopayDate: nextAutopayDate, obligationAssocID: obligationAssocID, dueDate: dueDate, agencyName: agencyName, configType: config.type })))),
+                isMobile && (React.createElement(InactiveControlsModule, { obligations: obligations, autoPayEnabled: autoPayEnabled, deactivatePaymentSchedule: deactivatePaymentSchedule, autoPaySchedule: autoPaySchedule, paymentPlanSchedule: paymentPlanSchedule, config: config, actions: actions, isMobile: isMobile, nextAutopayDate: nextAutopayDate, obligationAssocID: obligationAssocID, dueDate: dueDate, agencyName: agencyName, configType: config.type }))))));
+    return inactive ? inactiveObligation : activeObligation;
+};
+export default Obligation;

package/dist/src/components/molecules/obligation/icons/AccountBillIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountBillIcon;
+declare function AccountBillIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountBillIcon.js

@@ -0,0 +1,20 @@
+import React from "react";
+var AccountBillIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-bill-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-bill-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "AccountBill", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "AccountBillIcon", transform: "translate(7.000000, 5.000000)" },
+            React.createElement("g", { id: "Oval-Copy-6" },
+                React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-bill-filter-2)", xlinkHref: "#account-bill-path-1" }),
+                React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-bill-path-1" })),
+            React.createElement("path", { d: "M45.9999428,26.0000477 L45.9999428,25.6250486 C45.9999428,25.2083826 45.8541101,24.8542174 45.5624438,24.5625511 L45.5624438,24.5625511 L39.4374584,18.4375657 C39.1457921,18.1458994 38.791627,18.0000668 38.374961,18.0000668 L38.374961,18.0000668 L37.9999619,18.0000668 L37.9999619,26.0000477 L45.9999428,26.0000477 Z M44.4999464,49.9999905 C44.9166123,49.9999905 45.2707775,49.8541578 45.5624438,49.5624915 C45.8541101,49.2708252 45.9999428,48.91666 45.9999428,48.499994 L45.9999428,48.499994 L45.9999428,28.0000429 L37.499963,28.0000429 C37.0832971,28.0000429 36.7291319,27.8542102 36.4374656,27.562544 C36.1457993,27.2708777 35.9999666,26.9167125 35.9999666,26.5000465 L35.9999666,26.5000465 L35.9999666,18.0000668 L23.5,18.0000668 C23.0833304,18.0000668 22.7291652,18.1458994 22.437499,18.4375657 C22.1458327,18.729232 22,19.0833972 22,19.5000668 L22,19.5000668 L22,48.499994 C22,48.91666 22.1458327,49.2708252 22.437499,49.5624915 C22.7291652,49.8541578 23.0833304,49.9999905 23.5,49.9999905 L23.5,49.9999905 L44.4999464,49.9999905 Z M31.4999774,24.0000572 L26.4999905,24.0000572 C26.3749896,24.0000572 26.2604068,23.9479696 26.1562401,23.8438028 C26.0520734,23.7396361 25.9999905,23.6250533 25.9999905,23.5000572 L25.9999905,23.5000572 L25.9999905,22.5000572 C25.9999905,22.3750563 26.0520734,22.2604736 26.1562401,22.1563068 C26.2604068,22.0521401 26.3749896,22.0000572 26.4999905,22.0000572 L26.4999905,22.0000572 L31.4999774,22.0000572 C31.6249771,22.0000572 31.7395598,22.0521401 31.8437265,22.1563068 C31.9478933,22.2604736 31.9999762,22.3750563 31.9999762,22.5000572 L31.9999762,22.5000572 L31.9999762,23.5000572 C31.9999762,23.6250533 31.9478933,23.7396361 31.8437265,23.8438028 C31.7395598,23.9479696 31.6249771,24.0000572 31.4999774,24.0000572 L31.4999774,24.0000572 Z M31.4999774,28.0000477 L26.4999905,28.0000477 C26.3749896,28.0000477 26.2604068,27.94796 26.1562401,27.8437933 C26.0520734,27.7396266 25.9999905,27.6250438 25.9999905,27.5000477 L25.9999905,27.5000477 L25.9999905,26.5000477 C25.9999905,26.3750468 26.0520734,26.260464 26.1562401,26.1562973 C26.2604068,26.0521306 26.3749896,26.0000477 26.4999905,26.0000477 L26.4999905,26.0000477 L31.4999774,26.0000477 C31.6249771,26.0000477 31.7395598,26.0521306 31.8437265,26.1562973 C31.9478933,26.260464 31.9999762,26.3750468 31.9999762,26.5000477 L31.9999762,26.5000477 L31.9999762,27.5000477 C31.9999762,27.6250438 31.9478933,27.7396266 31.8437265,27.8437933 C31.7395598,27.94796 31.6249771,28.0000477 31.4999774,28.0000477 L31.4999774,28.0000477 Z M34.4999702,46 L33.4999726,46 C33.3749729,46 33.2603901,45.9479171 33.1562234,45.8437504 C33.0520567,45.7395836 32.9999738,45.6250009 32.9999738,45.5000012 L32.9999738,45.5000012 L32.9999738,44.0000048 C32.2916424,43.9583379 31.64581,43.7083385 31.0624784,43.2500066 C30.9374787,43.1666737 30.8645619,43.05209 30.8437289,42.9062574 C30.8228959,42.7604247 30.8749788,42.625008 30.9999785,42.5000083 L30.9999785,42.5000083 L31.7499768,41.81251 C31.9166433,41.6458434 32.1249759,41.6354274 32.3749753,41.7812601 C32.6249747,41.9270927 32.895807,42.0000095 33.1874733,42.0000095 L33.1874733,42.0000095 L34.9374692,42.0000095 C35.1458017,42.0000095 35.3228852,41.9166767 35.4687179,41.7500101 C35.6145506,41.5833435 35.6874674,41.395844 35.6874674,41.1875115 C35.6874674,40.979179 35.6353845,40.8020954 35.5312177,40.6562627 C35.427051,40.5104301 35.2916353,40.4166803 35.1249687,40.3750134 L35.1249687,40.3750134 L32.3124802,39.5625153 C31.7291438,39.3541828 31.2499779,39.0000167 30.8749788,38.5000179 C30.4999797,38.0000191 30.3124802,37.4375204 30.3124802,36.8125219 C30.3124802,36.0625237 30.5728965,35.4166922 31.0937283,34.8750265 C31.6145601,34.3333608 32.2499756,34.0416955 32.9999738,34.0000334 L32.9999738,34.0000334 L32.9999738,32.5000334 C32.9999738,32.3750325 33.0520567,32.2604497 33.1562234,32.156283 C33.2603901,32.0521163 33.3749729,32.0000334 33.4999726,32.0000334 L33.4999726,32.0000334 L34.4999702,32.0000334 C34.6249699,32.0000334 34.7395526,32.0521163 34.8437194,32.156283 C34.9478861,32.2604497 34.999969,32.3750325 34.999969,32.5000334 L34.999969,32.5000334 L34.999969,34.0000334 C35.7083003,34.0416955 36.3541328,34.2916949 36.9374644,34.7500268 C37.0624641,34.8333596 37.1353809,34.9479433 37.1562139,35.093776 C37.1770468,35.2396087 37.1249639,35.3750253 36.9999642,35.5000334 L36.9999642,35.5000334 L36.249966,36.1875234 C36.0832994,36.35419 35.8749669,36.364606 35.6249675,36.2187733 C35.3749681,36.0729407 35.1041357,36.0000334 34.8124695,36.0000334 L34.8124695,36.0000334 L33.0624736,36.0000334 C32.8541411,36.0000334 32.6770576,36.0833567 32.5312249,36.2500232 C32.3853922,36.4166898 32.3124802,36.6041894 32.3124802,36.8125219 C32.3124802,37.0208544 32.3645583,37.197938 32.468725,37.3437706 C32.5728918,37.4896033 32.7083075,37.5833531 32.8749741,37.62502 L32.8749741,37.62502 L35.6874674,38.437518 C36.270799,38.6458505 36.7499648,39.0000167 37.1249639,39.5000155 C37.499963,40.0000143 37.6874626,40.562513 37.6874626,41.1875115 C37.6874626,41.9375097 37.4270462,42.5833412 36.9062145,43.1250069 C36.3853827,43.6666725 35.7499672,43.9583379 34.999969,44.0000048 L34.999969,44.0000048 L34.999969,45.5000012 C34.999969,45.6250009 34.9478861,45.7395836 34.8437194,45.8437504 C34.7395526,45.9479171 34.6249699,46 34.4999702,46 L34.4999702,46 Z", id: "f", fill: "#292A33", fillRule: "nonzero" }))))); };
+export default AccountBillIcon;

package/dist/src/components/molecules/obligation/icons/AccountConstructionIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountConstructionIcon;
+declare function AccountConstructionIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountConstructionIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+var AccountConstructionIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-construction-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-construction-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "account-construction-Profile-/-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "Outlined", transform: "translate(-91.000000, -681.000000)" },
+            React.createElement("g", { id: "account-construction-Profile-Obligation-Icon-/-Account---Construction", transform: "translate(98.000000, 686.000000)" },
+                React.createElement("g", { id: "Oval-Copy-6" },
+                    React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-construction-filter-2)", xlinkHref: "#account-construction-path-1" }),
+                    React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-construction-path-1" })),
+                React.createElement("path", { d: "M45.34368,37.5000203 C45.6145124,37.5000203 45.8540958,37.3958535 46.0624283,37.187521 L46.0624283,37.187521 L51.6874149,31.5625344 C51.8957474,31.3542019 51.9999142,31.1146185 51.9999142,30.8437861 C51.9999142,30.5729538 51.8957474,30.3333704 51.6874149,30.1250378 L51.6874149,30.1250378 L50.3124182,28.6875413 C50.1040857,28.5208747 49.8645023,28.4375419 49.5936699,28.4375419 C49.3228375,28.4375419 49.0832541,28.5208747 48.8749216,28.6875413 L48.8749216,28.6875413 L48.1874233,29.4375395 L46.3749276,27.6250438 C46.5415942,26.9167125 46.5415942,26.2187972 46.3749276,25.5312988 C46.208261,24.8438004 45.8540958,24.2500519 45.3124301,23.750053 L45.3124301,23.750053 L42.246743,20.6849214 C41.0502644,19.5325165 39.6450828,18.7521483 38.0311975,18.3438159 C36.3020346,17.906317 34.5832887,17.906317 32.8749598,18.3438159 C31.1666308,18.7813149 29.6666344,19.6458958 28.3749705,20.9375598 L28.3749705,20.9375598 L33.9999571,23.750053 L33.9999571,24.9375502 C33.9999571,26.0208806 34.3957892,26.9583784 35.1874543,27.7500435 L35.1874543,27.7500435 L38.249947,30.8125362 C38.7916126,31.3542019 39.4061942,31.7083671 40.0936926,31.8750337 C40.7811909,32.0417003 41.4582723,32.0417003 42.1249377,31.8750337 L42.1249377,31.8750337 L43.9374334,33.6250295 L43.249935,34.3750277 C43.0416025,34.5416943 42.9374358,34.7708598 42.9374358,35.0625261 C42.9374358,35.3541924 43.0416025,35.5833579 43.249935,35.7500244 L43.249935,35.7500244 L44.6249318,37.187521 C44.8332643,37.3958535 45.0728477,37.5000203 45.34368,37.5000203 Z M19.9374906,49.9999905 C21.020821,49.9999905 21.9374858,49.5833245 22.6874841,48.7499934 L22.6874841,48.7499934 L37.5624486,32.8125314 C37.2707823,32.6041989 37.0416168,32.4166994 36.8749502,32.2500328 L36.8749502,32.2500328 L33.8124575,29.1875401 C33.604125,28.9792076 33.3957915,28.7292082 33.187459,28.4375419 L33.187459,28.4375419 L17.249997,43.3125064 C16.416666,44.0625046 16,44.9791694 16,46.0624999 C16,47.1458303 16.3854161,48.072912 17.1562472,48.8437432 C17.9270784,49.6145744 18.8541602,49.9999905 19.9374906,49.9999905 Z", id: "account-construction-h", fill: "#292A33", fillRule: "nonzero" })))))); };
+export default AccountConstructionIcon;

package/dist/src/components/molecules/obligation/icons/AccountDentalIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountDentalIcon;
+declare function AccountDentalIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountDentalIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+var AccountDentalIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-dental-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-dental-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "account-dental-Profile-/-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "Outlined", transform: "translate(-91.000000, -801.000000)" },
+            React.createElement("g", { id: "account-dental-Profile-Obligation-Icon-/-Account---Dental", transform: "translate(98.000000, 806.000000)" },
+                React.createElement("g", { id: "Oval-Copy-6" },
+                    React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-dental-filter-2)", xlinkHref: "#account-dental-path-1" }),
+                    React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-dental-path-1" })),
+                React.createElement("path", { d: "M40.4687012,49.9999905 C40.9062002,49.9999905 41.3020322,49.8645738 41.6561984,49.5937414 C42.0103645,49.3229091 42.229114,48.958326 42.3124468,48.499994 L42.3124468,48.499994 L42.8124456,46.3749991 C43.3541113,44.0000048 43.7916103,41.0833447 44.1249425,37.62502 C44.3749419,34.8333596 45.1249401,32.6041989 46.3749371,30.9375359 C47.0832684,29.9792052 47.5624343,28.9062908 47.8124337,27.7187936 C48.0624331,26.5312964 48.0416001,25.2917164 47.7499338,24.0000525 C47.4166016,22.5833888 46.7291033,21.3438088 45.6874388,20.2813113 C44.6457743,19.2188139 43.4166112,18.5208985 41.9999475,18.1875663 C40.2916186,17.7292344 38.437456,18.2292332 36.4374608,19.6875627 C36.3124611,19.7708956 36.1457945,19.8542293 35.937462,19.9375621 L35.937462,19.9375621 L35.7499624,20.000062 L37.5624581,21.1875592 C37.7707906,21.3125589 37.9062073,21.5104754 37.9687072,21.7813077 C38.031207,22.0521401 37.9895401,22.3021395 37.8437075,22.531306 C37.6978748,22.7604724 37.4895413,22.9063051 37.2187089,22.9688049 C36.9478766,23.0313048 36.6874602,22.9792219 36.4374608,22.8125553 L36.4374608,22.8125553 L30.1874757,18.8125648 C28.7291462,18.0208997 27.3333155,17.8125672 25.9999857,18.1875663 C24.5833221,18.5208985 23.354159,19.2188139 22.3124945,20.2813113 C21.27083,21.3438088 20.5833316,22.5833888 20.2499994,24.0000525 C19.9583331,25.2917164 19.9375001,26.5312964 20.1874996,27.7187936 C20.437499,28.9062908 20.9166648,29.9792052 21.6249961,30.9375359 C22.8749931,32.6041989 23.6249914,34.8333596 23.8749908,37.62502 C24.208323,41.0833447 24.6458219,44.0000048 25.1874876,46.3749991 L25.1874876,46.3749991 L25.6874864,48.499994 C25.7708193,48.958326 25.9895687,49.3229091 26.3437349,49.5937414 C26.697901,49.8645738 27.0937331,49.9999905 27.531232,49.9999905 C27.968731,49.9999905 28.3541471,49.8645738 28.6874793,49.5937414 C29.0208115,49.3229091 29.2499779,48.9791599 29.3749776,48.5624939 L29.3749776,48.5624939 L31.4999726,39.8750146 C31.6666392,39.3333489 31.9791384,38.875017 32.4374703,38.5000179 C32.8958023,38.1250188 33.416635,37.9375192 33.9999666,37.9375192 C34.5832982,37.9375192 35.104131,38.1250188 35.5624629,38.5000179 C36.0207948,38.875017 36.3332941,39.3333489 36.4999607,39.8750146 L36.4999607,39.8750146 L38.6249556,48.5624939 C38.7499553,48.9791599 38.9791217,49.3229091 39.312454,49.5937414 C39.6457862,49.8645738 40.0312022,49.9999905 40.4687012,49.9999905 Z", id: "t", fill: "#292A33", fillRule: "nonzero" })))))); };
+export default AccountDentalIcon;

package/dist/src/components/molecules/obligation/icons/AccountElectricIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountElectricIcon;
+declare function AccountElectricIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountElectricIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+var AccountElectricIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-electric-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-electric-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "account-electric-Profile-/-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "Outlined", transform: "translate(-91.000000, -225.000000)" },
+            React.createElement("g", { id: "account-electric-Profile-Obligation-Icon-/-Account---Electric", transform: "translate(98.000000, 230.000000)" },
+                React.createElement("g", { id: "Oval-Copy-6" },
+                    React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-electric-filter-2)", xlinkHref: "#account-electric-path-1" }),
+                    React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-electric-path-1" })),
+                React.createElement("path", { d: "M41.9999619,27.0000453 L41.9999619,20.0000668 C41.9999619,19.4583963 41.8020358,18.9896474 41.4062037,18.5938153 C41.0103717,18.1979833 40.5416228,18.0000668 39.9999619,18.0000668 C39.4582914,18.0000668 38.9895425,18.1979833 38.5937104,18.5938153 C38.1978784,18.9896474 37.9999619,19.4583963 37.9999619,20.0000668 L37.9999619,20.0000668 L37.9999619,27.0000453 L41.9999619,27.0000453 Z M29.9999905,27.0000453 L29.9999905,20.0000668 C29.9999905,19.4583963 29.8020644,18.9896474 29.4062323,18.5938153 C29.0104003,18.1979833 28.5416514,18.0000668 27.9999905,18.0000668 C27.45832,18.0000668 26.9895711,18.1979833 26.593739,18.5938153 C26.197907,18.9896474 25.9999905,19.4583963 25.9999905,20.0000668 L25.9999905,20.0000668 L25.9999905,27.0000453 L29.9999905,27.0000453 Z M35.9999666,49.9999905 L35.9999666,43.8125052 C38.2916281,43.3541733 40.1978736,42.2083421 41.718703,40.3750134 C43.2395324,38.5416848 43.9999475,36.4166898 43.9999475,34.0000286 L43.9999475,34.0000286 L43.9999475,32.0000429 L44.9999452,32.0000429 C45.2916115,32.0000429 45.5311939,31.9062836 45.7186935,31.718784 C45.906193,31.5312845 45.9999428,31.2917021 45.9999428,31.0000429 L45.9999428,31.0000429 L45.9999428,29.0000429 C45.9999428,28.7083742 45.906193,28.4687918 45.7186935,28.2812922 C45.5311939,28.0937927 45.2916115,28.0000429 44.9999452,28.0000429 L44.9999452,28.0000429 L23,28.0000429 C22.7083313,28.0000429 22.4687489,28.0937927 22.2812493,28.2812922 C22.0937498,28.4687918 22,28.7083742 22,29.0000429 L22,29.0000429 L22,31.0000429 C22,31.2917021 22.0937498,31.5312845 22.2812493,31.718784 C22.4687489,31.9062836 22.7083313,32.0000429 23,32.0000429 L23,32.0000429 L24,32.0000429 L24,34.0000286 C24,36.4166898 24.7604104,38.5416848 26.2812398,40.3750134 C27.8020692,42.2083421 29.7083146,43.3541733 31.9999762,43.8125052 L31.9999762,43.8125052 L31.9999762,49.9999905 L35.9999666,49.9999905 Z", id: "p", fill: "#292A33", fillRule: "nonzero" })))))); };
+export default AccountElectricIcon;

package/dist/src/components/molecules/obligation/icons/AccountGarbageIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountGarbageIcon;
+declare function AccountGarbageIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountGarbageIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+var AccountGarbageIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-garbage-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-garbage-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "account-garbage-Profile-/-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "Outlined", transform: "translate(-91.000000, -453.000000)" },
+            React.createElement("g", { id: "account-garbage-Profile-Obligation-Icon-/-Account---Trash-pickup", transform: "translate(98.000000, 458.000000)" },
+                React.createElement("g", { id: "Oval-Copy-6" },
+                    React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-garbage-filter-2)", xlinkHref: "#account-garbage-path-1" }),
+                    React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-garbage-path-1" })),
+                React.createElement("path", { d: "M47.249935,24.0000525 C47.4582675,24.0000525 47.6353511,23.9271356 47.7811838,23.781303 C47.9270164,23.6354703 47.9999332,23.4583868 47.9999332,23.2500542 L47.9999332,21.5000668 C47.9999332,21.0833924 47.8541006,20.7292272 47.5624343,20.4375609 C47.270768,20.1458947 46.9166028,20.0000668 46.4999368,20.0000668 L39.4999535,20.0000668 L38.9374548,18.8125648 C38.8124551,18.5625654 38.6249556,18.3646489 38.3749562,18.2188162 C38.1249568,18.0729836 37.8541244,18.0000668 37.5624581,18.0000668 L30.4374751,18.0000668 C30.1458088,18.0000668 29.8749765,18.0729836 29.6249771,18.2188162 C29.3749776,18.3646489 29.1874781,18.5625654 29.0624784,18.8125648 L28.4999797,20.0000668 L21.5,20.0000668 C21.0833304,20.0000668 20.7291652,20.1458947 20.437499,20.4375609 C20.1458327,20.7292272 20,21.0833924 20,21.5000668 L20,23.2500542 C20,23.4583868 20.0729168,23.6354703 20.2187495,23.781303 C20.3645821,23.9271356 20.5416657,24.0000525 20.7499982,24.0000525 L47.249935,24.0000525 Z M42.9999452,49.9999905 C43.8332762,49.9999905 44.5416085,49.7083242 45.1249401,49.1249925 C45.7082717,48.5416609 45.999938,47.8333286 45.999938,46.9999976 L45.999938,26.7500459 C45.999938,26.5417134 45.9270212,26.3646298 45.7811885,26.2187972 C45.6353559,26.0729645 45.4582723,26.0000477 45.2499398,26.0000477 L22.7499934,26.0000477 C22.5416609,26.0000477 22.3645774,26.0729645 22.2187447,26.2187972 C22.072912,26.3646298 21.9999952,26.5417134 21.9999952,26.7500459 L21.9999952,46.9999976 C21.9999952,47.8333286 22.2916615,48.5416609 22.8749931,49.1249925 C23.4583248,49.7083242 24.1666571,49.9999905 24.9999952,49.9999905 L42.9999452,49.9999905 Z M27.9999833,46 C27.7083146,46 27.4687322,45.9062502 27.2812326,45.7187507 C27.0937331,45.5312511 26.9999833,45.2916687 26.9999833,45.0000024 L26.9999833,31.0000381 C26.9999833,30.7083695 27.0937331,30.468787 27.2812326,30.2812875 C27.4687322,30.0937879 27.7083146,30.0000381 27.9999833,30.0000381 C28.2916472,30.0000381 28.5312297,30.0937879 28.7187292,30.2812875 C28.9062288,30.468787 28.9999833,30.7083695 28.9999833,31.0000381 L28.9999833,45.0000024 C28.9999833,45.2916687 28.9062288,45.5312511 28.7187292,45.7187507 C28.5312297,45.9062502 28.2916472,46 27.9999833,46 Z M33.999969,46 C33.7083003,46 33.4687179,45.9062502 33.2812183,45.7187507 C33.0937188,45.5312511 32.999969,45.2916687 32.999969,45.0000024 L32.999969,31.0000381 C32.999969,30.7083695 33.0937188,30.468787 33.2812183,30.2812875 C33.4687179,30.0937879 33.7083003,30.0000381 33.999969,30.0000381 C34.2916329,30.0000381 34.5312154,30.0937879 34.7187149,30.2812875 C34.9062145,30.468787 34.999969,30.7083695 34.999969,31.0000381 L34.999969,45.0000024 C34.999969,45.2916687 34.9062145,45.5312511 34.7187149,45.7187507 C34.5312154,45.9062502 34.2916329,46 33.999969,46 Z M39.9999547,46 C39.708286,46 39.4687036,45.9062502 39.281204,45.7187507 C39.0937045,45.5312511 38.9999547,45.2916687 38.9999547,45.0000024 L38.9999547,31.0000381 C38.9999547,30.7083695 39.0937045,30.468787 39.281204,30.2812875 C39.4687036,30.0937879 39.708286,30.0000381 39.9999547,30.0000381 C40.2916186,30.0000381 40.531201,30.0937879 40.7187006,30.2812875 C40.9062002,30.468787 40.9999547,30.7083695 40.9999547,31.0000381 L40.9999547,45.0000024 C40.9999547,45.2916687 40.9062002,45.5312511 40.7187006,45.7187507 C40.531201,45.9062502 40.2916186,46 39.9999547,46 Z", id: "t", fill: "#292A33", fillRule: "nonzero" })))))); };
+export default AccountGarbageIcon;

package/dist/src/components/molecules/obligation/icons/AccountGasIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountGasIcon;
+declare function AccountGasIcon(): JSX.Element;

package/dist/src/components/molecules/obligation/icons/AccountGasIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+var AccountGasIcon = function () { return (React.createElement("svg", { width: "51px", height: "51px", viewBox: "0 0 81 81", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" },
+    React.createElement("defs", null,
+        React.createElement("circle", { id: "account-gas-path-1", cx: "33.5", cy: "33.5", r: "33.5" }),
+        React.createElement("filter", { x: "-17.2%", y: "-14.2%", width: "134.3%", height: "134.3%", filterUnits: "objectBoundingBox", id: "account-gas-filter-2" },
+            React.createElement("feOffset", { dx: "0", dy: "-4", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.964705882   0 0 0 0 0.964705882   0 0 0 0 0.976470588  0 0 0 1 0", type: "matrix", in: "shadowOffsetOuter1", result: "shadowMatrixOuter1" }),
+            React.createElement("feOffset", { dx: "0", dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter2" }),
+            React.createElement("feGaussianBlur", { stdDeviation: "3.5", in: "shadowOffsetOuter2", result: "shadowBlurOuter2" }),
+            React.createElement("feColorMatrix", { values: "0 0 0 0 0.161570617   0 0 0 0 0.163300979   0 0 0 0 0.199501812  0 0 0 0.3 0", type: "matrix", in: "shadowBlurOuter2", result: "shadowMatrixOuter2" }),
+            React.createElement("feMerge", null,
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter1" }),
+                React.createElement("feMergeNode", { in: "shadowMatrixOuter2" })))),
+    React.createElement("g", { id: "account-gas-Profile-/-Icons", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "Outlined", transform: "translate(-91.000000, -339.000000)" },
+            React.createElement("g", { id: "account-gas-Profile-Obligation-Icon-/-Account---Gas", transform: "translate(98.000000, 344.000000)" },
+                React.createElement("g", { id: "Oval-Copy-6" },
+                    React.createElement("use", { fill: "black", fillOpacity: "1", filter: "url(#account-gas-filter-2)", xlinkHref: "#account-gas-path-1" }),
+                    React.createElement("use", { fill: "#FFFFFF", fillRule: "evenodd", xlinkHref: "#account-gas-path-1" })),
+                React.createElement("path", { d: "M33.9999714,49.9999905 C36.1666332,49.9999905 38.1666284,49.4583248 39.9999571,48.3749943 C41.8332857,47.2916639 43.2916162,45.8333334 44.3749467,44.0000048 C45.4582771,42.1666761 45.9999428,40.1666809 45.9999428,38.0000191 C45.9999428,36.1666904 45.6874435,34.4583605 45.062445,32.8750313 C44.5207793,31.6250343 43.7291152,30.3958702 42.6874507,29.1875401 C42.0624522,28.4792088 41.0832875,27.5000441 39.7499577,26.2500471 C38.2916281,24.9167173 37.3124635,23.8750528 36.8124647,23.1250545 C35.9374668,21.9583903 35.4999678,20.7500602 35.4999678,19.5000632 C35.4999678,19.0000644 35.3333012,18.6146483 34.999969,18.3438159 C34.6666368,18.0729836 34.2708038,17.9583999 33.8124718,18.0000668 C33.3541399,18.0417336 32.9999738,18.2708991 32.7499744,18.6875651 C31.1666451,20.9375598 30.2708133,22.937555 30.0624808,24.6875508 C29.8541483,26.1042144 30.1041477,27.3958774 30.812479,28.5625416 C31.229145,29.2708729 32.041643,30.2083707 33.2499732,31.3750349 C34.166638,32.2916997 34.7916365,33.000031 35.1249687,33.5000298 C35.7083003,34.2916949 35.9999666,35.1250259 35.9999666,36.0000238 C35.9999666,37.1250212 35.6041345,38.0729359 34.8124695,38.8437671 C34.0208044,39.6145982 33.0728906,40.0000143 31.9687262,40.0000143 C30.8645619,40.0000143 29.9270641,39.6041822 29.1562329,38.8125171 C28.3854018,38.020852 27.9999857,37.0625213 27.9999857,35.937524 L27.9999857,35.937524 L27.9999857,30.6250367 C27.9999857,30.1667047 27.854153,29.8021216 27.5624867,29.5312893 C27.2708204,29.2604569 26.9166553,29.1146233 26.4999893,29.0937903 C26.0833233,29.0729573 25.7291581,29.229207 25.4374918,29.5625392 C24.4791611,30.5625368 23.687496,31.729201 23.0624975,33.0625308 C22.3541661,34.6458601 22,36.2916901 22,38.0000191 C22,40.1666809 22.5416657,42.1666761 23.6249961,44.0000048 C24.7083266,45.8333334 26.1666571,47.2916639 27.9999857,48.3749943 C29.8333143,49.4583248 31.8333096,49.9999905 33.9999714,49.9999905 Z", id: "f", fill: "#292A33", fillRule: "nonzero" })))))); };
+export default AccountGasIcon;

package/dist/src/components/molecules/obligation/icons/AccountGenericIcon.d.ts

@@ -0,0 +1,2 @@
+export default AccountGenericIcon;
+declare function AccountGenericIcon(): JSX.Element;