@adiba-banking-cloud/backoffice 0.0.18 → 0.0.20

package/build/index.esm.js/index.js

@@ -1,11 +1,11 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React, { useRef, useMemo, useEffect } from 'react';
+import React$1, { useRef, useMemo, useEffect } from 'react';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsRounded from 'highcharts-rounded-corners';
 import * as IconSax from 'iconsax-react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, createTheme, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, rem, SimpleGrid, Indicator } from '@mantine/core';
+import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, createTheme, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, rem, SimpleGrid, Indicator, Table } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { useDisclosure } from '@mantine/hooks';
 import '@fontsource/poppins/100.css';
@@ -11212,7 +11212,7 @@ const Column = props => {
       chartRef.current.chart.update(chartOptions, true);
     }
   }, [chartOptions]);
-  return /*#__PURE__*/React.createElement(HighchartsReact, {
+  return /*#__PURE__*/React$1.createElement(HighchartsReact, {
     highcharts: Highcharts,
     ref: chartRef,
     options: chartOptions
@@ -11230,7 +11230,7 @@ const EqualizerColumn = props => {
     colors: [props.color || "blue"],
     title: props.title
   };
-  return /*#__PURE__*/React.createElement(Column, chartOptions);
+  return /*#__PURE__*/React$1.createElement(Column, chartOptions);
 };
 const SimpleColumn = props => {
   const chartOptions = {
@@ -11244,10 +11244,10 @@ const SimpleColumn = props => {
     colors: [props.color || "gray"],
     title: props.title
   };
-  return /*#__PURE__*/React.createElement(Column, chartOptions);
+  return /*#__PURE__*/React$1.createElement(Column, chartOptions);
 };
 const StackedColumn = props => {
-  return /*#__PURE__*/React.createElement(Column, _extends({}, props, {
+  return /*#__PURE__*/React$1.createElement(Column, _extends({}, props, {
     equalizer: false
   }));
 };
@@ -11382,7 +11382,7 @@ const Icons = _ref => {
     color
   } = _ref;
   const Element = IconSax[name];
-  return /*#__PURE__*/React.createElement(Element, {
+  return /*#__PURE__*/React$1.createElement(Element, {
     size,
     color,
     variant,
@@ -11407,15 +11407,15 @@ const Logo = _ref => {
       fit
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$7);
-  return /*#__PURE__*/React.createElement(Center, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(Center, _extends({}, rest, {
     component: Link,
     display: "flex",
     to: href
-  }), /*#__PURE__*/React.createElement(Image, {
+  }), /*#__PURE__*/React$1.createElement(Image, {
     fallbackSrc: fallbackSrc,
     src: src,
     fit: fit
-  }), /*#__PURE__*/React.createElement(Space, {
+  }), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1,
     hidden: true
   }));
@@ -11428,7 +11428,7 @@ const DynamicLogo = _ref2 => {
       w = 180
     } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded2$2);
-  return /*#__PURE__*/React.createElement(Logo, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(Logo, _extends({}, rest, {
     href,
     src,
     fit,
@@ -11442,7 +11442,7 @@ const DynamicShigaLogo = _ref3 => {
       fit = "contain"
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded3$1);
-  return /*#__PURE__*/React.createElement(Logo, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(Logo, _extends({}, rest, {
     href,
     src,
     fit,
@@ -11457,13 +11457,13 @@ const ApplicationMenuTarget = _ref => {
       toggle
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$6);
-  return /*#__PURE__*/React.createElement(Popover.Target, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React$1.createElement(Popover.Target, null, /*#__PURE__*/React$1.createElement(Button, {
     variant: "transparent",
     justify: "space-between",
     h: 60,
     fw: 300,
     w: 200,
-    rightSection: /*#__PURE__*/React.createElement(Icons, {
+    rightSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "ArrowDown2",
       size: 16
     }),
@@ -11478,32 +11478,32 @@ const ApplicationMenuDropdown = _ref => {
     moreLink,
     toggle
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Dropdown, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Popover.Dropdown, {
     ml: "md",
     p: 5
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     gap: 5,
     p: 0
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     gap: 5,
     align: "flex-start"
-  }, items.map((item, index) => /*#__PURE__*/React.createElement(DropdownItem, _extends({
+  }, items.map((item, index) => /*#__PURE__*/React$1.createElement(DropdownItem, _extends({
     key: "item-".concat(index)
   }, item, {
     onClick: e => {
       toggle();
       item.onClick(e);
     }
-  })))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Group, {
+  })))), /*#__PURE__*/React$1.createElement(Divider, null), /*#__PURE__*/React$1.createElement(Group, {
     grow: true,
     justify: "center"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React$1.createElement(Button, {
     variant: "subtle",
     p: 0,
     component: Link,
     to: moreLink,
     onClick: toggle
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     size: "xs",
     fw: 300,
     w: 320
@@ -11520,22 +11520,22 @@ const DropdownItem = _ref2 => {
     inactiveColor = "adiba",
     onClick
   } = _ref2;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Button, {
     variant: "subtle",
     fw: 300,
     mih: 70,
     bg: active ? activeBg : {},
     c: active ? activeColor : inactiveColor,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     w: 320
-  }, /*#__PURE__*/React.createElement(Icons, icon), /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Icons, icon), /*#__PURE__*/React$1.createElement(Stack, {
     align: "flex-start",
     gap: 5
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     size: "sm",
     fw: 300
-  }, title), /*#__PURE__*/React.createElement(Text, {
+  }, title), /*#__PURE__*/React$1.createElement(Text, {
     size: "xs",
     fz: 11,
     fw: 300
@@ -11553,7 +11553,7 @@ const ApplicationMenu = _ref => {
   const [opened, {
     toggle
   }] = useDisclosure(false);
-  return /*#__PURE__*/React.createElement(Popover, {
+  return /*#__PURE__*/React$1.createElement(Popover, {
     transitionProps: {
       transition
     },
@@ -11567,9 +11567,9 @@ const ApplicationMenu = _ref => {
     radius: "sm",
     opened: opened,
     onChange: toggle
-  }, /*#__PURE__*/React.createElement(ApplicationMenuTarget, {
+  }, /*#__PURE__*/React$1.createElement(ApplicationMenuTarget, {
     toggle
-  }, label), /*#__PURE__*/React.createElement(ApplicationMenuDropdown, {
+  }, label), /*#__PURE__*/React$1.createElement(ApplicationMenuDropdown, {
     items,
     moreLink,
     moreText,
@@ -11583,28 +11583,28 @@ const UserMenuTarget = _ref => {
     username,
     avatar
   } = _ref;
-  return /*#__PURE__*/React.createElement(Menu.Target, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React$1.createElement(Menu.Target, null, /*#__PURE__*/React$1.createElement(Button, {
     variant: "subtle",
     h: 50,
     px: 10,
     radius: "md"
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     gap: "sm"
-  }, /*#__PURE__*/React.createElement(Avatar, {
+  }, /*#__PURE__*/React$1.createElement(Avatar, {
     radius: "xl",
     src: avatar
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React$1.createElement(Stack, {
     gap: 0,
     align: "flex-start",
     visibleFrom: "md",
     fw: 300
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     size: "sm"
-  }, name), /*#__PURE__*/React.createElement(Text, {
+  }, name), /*#__PURE__*/React$1.createElement(Text, {
     c: "dimmed",
     size: "xs"
-  }, username)), /*#__PURE__*/React.createElement(Icons, {
+  }, username)), /*#__PURE__*/React$1.createElement(Icons, {
     name: "ArrowDown2",
     size: 12
   }))));
@@ -11615,36 +11615,36 @@ const UserMenuDropdown = _ref => {
     sections,
     height = 40
   } = _ref;
-  return /*#__PURE__*/React.createElement(Menu.Dropdown, null, sections.map((section, index) => {
+  return /*#__PURE__*/React$1.createElement(Menu.Dropdown, null, sections.map((section, index) => {
     const items = [];
     const sectionItems = section.items.map((item, key) => {
       var _item$badge, _item$badge2;
-      return /*#__PURE__*/React.createElement(Menu.Item, {
+      return /*#__PURE__*/React$1.createElement(Menu.Item, {
         c: section === null || section === void 0 ? void 0 : section.color,
         key: "menu-item-".concat(key),
         h: height,
-        leftSection: /*#__PURE__*/React.createElement(Icons, _extends({}, item.icon, {
+        leftSection: /*#__PURE__*/React$1.createElement(Icons, _extends({}, item.icon, {
           stroke: 0.5
         })),
-        rightSection: item !== null && item !== void 0 && item.disclosure ? /*#__PURE__*/React.createElement(Icons, {
+        rightSection: item !== null && item !== void 0 && item.disclosure ? /*#__PURE__*/React$1.createElement(Icons, {
           name: "ArrowRight2",
           size: 12,
           stroke: 0.5
-        }) : item.badge ? /*#__PURE__*/React.createElement(Badge, {
+        }) : item.badge ? /*#__PURE__*/React$1.createElement(Badge, {
           color: item === null || item === void 0 || (_item$badge = item.badge) === null || _item$badge === void 0 ? void 0 : _item$badge.color,
           size: "sm"
         }, item === null || item === void 0 || (_item$badge2 = item.badge) === null || _item$badge2 === void 0 ? void 0 : _item$badge2.text) : undefined,
         onClick: () => item.callbackFn ? item.callbackFn() : void 0
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, /*#__PURE__*/React$1.createElement(Text, {
         size: "xs",
         fw: 300
       }, item.label));
     });
-    if (index) items.push(/*#__PURE__*/React.createElement(Divider, {
+    if (index) items.push(/*#__PURE__*/React$1.createElement(Divider, {
       key: "divider-".concat(index),
       my: 2
     }));
-    if (section !== null && section !== void 0 && section.title) items.push(/*#__PURE__*/React.createElement(Menu.Label, {
+    if (section !== null && section !== void 0 && section.title) items.push(/*#__PURE__*/React$1.createElement(Menu.Label, {
       fz: 10,
       fw: 500,
       c: 'dimmed',
@@ -11664,7 +11664,7 @@ const UserMenu = _ref => {
     avatar,
     sections
   } = _ref;
-  return /*#__PURE__*/React.createElement(Menu, {
+  return /*#__PURE__*/React$1.createElement(Menu, {
     width: width || 250,
     transitionProps: {
       transition: "pop"
@@ -11675,11 +11675,11 @@ const UserMenu = _ref => {
     offset: 5,
     arrowOffset: 20,
     arrowSize: 10
-  }, /*#__PURE__*/React.createElement(UserMenuTarget, {
+  }, /*#__PURE__*/React$1.createElement(UserMenuTarget, {
     name,
     username,
     avatar
-  }), /*#__PURE__*/React.createElement(UserMenuDropdown, {
+  }), /*#__PURE__*/React$1.createElement(UserMenuDropdown, {
     sections,
     height
   }));
@@ -11693,9 +11693,9 @@ const SideMenu = _ref => {
     sidemenu,
     onClick
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, sidemenu.map(item => {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, sidemenu.map(item => {
     var _item$children, _item$children2;
-    return /*#__PURE__*/React.createElement(NavLink, {
+    return /*#__PURE__*/React$1.createElement(NavLink, {
       className: "backoffice-sidemenu",
       mt: "sm",
       component: Link,
@@ -11708,10 +11708,10 @@ const SideMenu = _ref => {
       color,
       variant,
       onClick,
-      leftSection: item.icon ? /*#__PURE__*/React.createElement(Icons, item.icon) : undefined,
+      leftSection: item.icon ? /*#__PURE__*/React$1.createElement(Icons, item.icon) : undefined,
       label: item.label,
       to: (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? "#" : (item === null || item === void 0 ? void 0 : item.href) || "#"
-    }, (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? item.children.map(subitem => /*#__PURE__*/React.createElement(NavLink, {
+    }, (_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length ? item.children.map(subitem => /*#__PURE__*/React$1.createElement(NavLink, {
       label: subitem.label,
       active: subitem.active,
       color,
@@ -11738,7 +11738,7 @@ const SimplePanel = _ref => {
       children
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React$1.createElement(Card, _extends({
     p: !withPadding ? 0 : "md",
     radius: !withRadius ? 0 : "lg",
     flex: autoHeight ? 1 : "none"
@@ -11751,34 +11751,34 @@ const TitledPanel = _ref2 => {
       children
     } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded2$1);
-  return /*#__PURE__*/React.createElement(SimplePanel, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(SimplePanel, _extends({}, rest, {
     withPadding: withPadding
-  }), /*#__PURE__*/React.createElement(Group, {
+  }), /*#__PURE__*/React$1.createElement(Group, {
     h: 48,
     px: withPadding ? 0 : "md",
     mt: !withPadding ? "md" : 0,
     justify: "space-between"
-  }, /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Center, {
+  }, /*#__PURE__*/React$1.createElement(Group, null, /*#__PURE__*/React$1.createElement(Center, {
     bg: "gray.1",
     w: 32,
     h: 32,
     style: {
       borderRadius: "50%"
     }
-  }, /*#__PURE__*/React.createElement(Icons, _extends({}, title.icon, {
+  }, /*#__PURE__*/React$1.createElement(Icons, _extends({}, title.icon, {
     size: 20,
     variant: "Bulk"
-  }))), /*#__PURE__*/React.createElement(Text, {
+  }))), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300
-  }, title.label)), /*#__PURE__*/React.createElement(Space, {
+  }, title.label)), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1
-  }), /*#__PURE__*/React.createElement(Group, {
+  }), /*#__PURE__*/React$1.createElement(Group, {
     hidden: !rest.middlesection
-  }, rest.middlesection), /*#__PURE__*/React.createElement(Space, {
+  }, rest.middlesection), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1
-  }), /*#__PURE__*/React.createElement(Group, {
+  }), /*#__PURE__*/React$1.createElement(Group, {
     hidden: !rest.rightsection
-  }, rest.rightsection)), /*#__PURE__*/React.createElement(Box, {
+  }, rest.rightsection)), /*#__PURE__*/React$1.createElement(Box, {
     pt: !withPadding ? 0 : "md"
   }, children));
 };
@@ -11796,21 +11796,21 @@ const SearchPanel = _ref3 => {
       children
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded3);
-  return /*#__PURE__*/React.createElement(SimplePanel, rest, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Group, {
+  return /*#__PURE__*/React$1.createElement(SimplePanel, rest, /*#__PURE__*/React$1.createElement(Stack, null, /*#__PURE__*/React$1.createElement(Group, {
     gap: 'xs'
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React$1.createElement(TextInput, {
     fw: 300,
     name: "search",
     size: "md",
     radius: "md",
     flex: 1,
     placeholder: placeholder,
-    leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon),
-    rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React.createElement(ActionIcon, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, searchIcon),
+    rightSection: typeof filterFn == 'function' ? /*#__PURE__*/React$1.createElement(ActionIcon, {
       variant: "transparent",
       onClick: filterFn
-    }, /*#__PURE__*/React.createElement(Icons, filterIcon)) : /*#__PURE__*/React.createElement(React.Fragment, null, console.debug(typeof filterFn))
-  }), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React$1.createElement(Icons, filterIcon)) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, console.debug(typeof filterFn))
+  }), /*#__PURE__*/React$1.createElement(Button, {
     variant: "light",
     size: "md",
     fw: 300,
@@ -11818,7 +11818,7 @@ const SearchPanel = _ref3 => {
     miw: 100,
     maw: 150,
     type: "submit",
-    leftSection: /*#__PURE__*/React.createElement(Icons, searchIcon)
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, searchIcon)
   }, searchText)), children));
 };
 
@@ -11828,13 +11828,13 @@ const LabelPanelItem = _ref => {
     value,
     labelWidth
   } = _ref;
-  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(Group, null, /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: "sm",
     c: "dimmed",
     w: labelWidth,
     truncate: true
-  }, label), /*#__PURE__*/React.createElement(Text, {
+  }, label), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: "sm",
     truncate: true
@@ -11856,19 +11856,19 @@ const LabelPanel = _ref => {
       p = "md"
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement(Card, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(Card, _extends({}, rest, {
     withBorder,
     radius,
     p
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React$1.createElement(Stack, {
     pb: 'md'
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     justify: "space-between",
     p: 0
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(Title, {
     order: 6,
     py: "xs"
-  }, title), /*#__PURE__*/React.createElement(Button, {
+  }, title), /*#__PURE__*/React$1.createElement(Button, {
     style: {
       display: hasEdit ? "block" : "none"
     },
@@ -11876,11 +11876,11 @@ const LabelPanel = _ref => {
     variant: "outline",
     onClick: editFn,
     size: "xs",
-    leftSection: /*#__PURE__*/React.createElement(Icons, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "Edit2"
     })
   }, editLabel)), items.map((item, index) => {
-    return /*#__PURE__*/React.createElement(LabelPanelItem, _extends({
+    return /*#__PURE__*/React$1.createElement(LabelPanelItem, _extends({
       key: "label-item-".concat(index)
     }, item, {
       labelWidth: labelWidth
@@ -11903,41 +11903,41 @@ const AvatarLabelPanel = _ref2 => {
       editFn = void 0
     } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Card, _extends({}, rest, {
+  return /*#__PURE__*/React$1.createElement(Card, _extends({}, rest, {
     withBorder,
     radius,
     p
-  }), /*#__PURE__*/React.createElement(Group, {
+  }), /*#__PURE__*/React$1.createElement(Group, {
     align: "flex-start",
     py: "sm"
-  }, /*#__PURE__*/React.createElement(Center, {
+  }, /*#__PURE__*/React$1.createElement(Center, {
     w: labelWidth
-  }, /*#__PURE__*/React.createElement(Avatar, {
+  }, /*#__PURE__*/React$1.createElement(Avatar, {
     size: avatarSize,
     src: avatar
-  })), /*#__PURE__*/React.createElement(Stack, {
+  })), /*#__PURE__*/React$1.createElement(Stack, {
     py: 10,
     gap: "md",
     h: "100%"
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(Title, {
     fw: 500,
     order: 4
-  }, name), /*#__PURE__*/React.createElement(Text, {
+  }, name), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: 14
-  }, username), /*#__PURE__*/React.createElement(Text, {
+  }, username), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: 14
-  }, "Internal / ", role), /*#__PURE__*/React.createElement(Text, {
+  }, "Internal / ", role), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: 14
-  }, "Last login: ", lastActive)), /*#__PURE__*/React.createElement(Space, {
+  }, "Last login: ", lastActive)), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React$1.createElement(Button, {
     fw: 300,
     variant: "outline",
     size: "xs",
-    leftSection: /*#__PURE__*/React.createElement(Icons, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "Edit2"
     })
   }, editLabel)));
@@ -11950,7 +11950,7 @@ const SimpleText = _ref => {
       smaller
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React$1.createElement(Text, _extends({
     fw: 300,
     fz: smaller ? '90%' : undefined
   }, rest), label);
@@ -11994,51 +11994,51 @@ const PageTitle = _ref => {
       icon,
       label
     } = create;
-    rightsection = /*#__PURE__*/React.createElement(Button, {
+    rightsection = /*#__PURE__*/React$1.createElement(Button, {
       radius: "md",
       size: "sm",
-      leftSection: /*#__PURE__*/React.createElement(Icons, icon),
+      leftSection: /*#__PURE__*/React$1.createElement(Icons, icon),
       onClick: createFn
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React$1.createElement(Text, {
       fw: 300,
       fz: 14
     }, label));
   }
   if (withSwitcher && switcher !== null && switcher !== void 0 && (_switcher$items = switcher.items) !== null && _switcher$items !== void 0 && _switcher$items.length) {
-    rightsection = /*#__PURE__*/React.createElement(SegmentedControl, {
+    rightsection = /*#__PURE__*/React$1.createElement(SegmentedControl, {
       size: "sm",
       color: theme.primaryColor,
       data: switcher.items
     });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Group, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Group, {
     justify: "space-between",
     py: "lg"
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     gap: 4
-  }, /*#__PURE__*/React.createElement(Title, _extends({
+  }, /*#__PURE__*/React$1.createElement(Title, _extends({
     order: 2,
     fw: 500
-  }, rest), title), typeof subtitle == "string" ? /*#__PURE__*/React.createElement(Text, {
+  }, rest), title), typeof subtitle == "string" ? /*#__PURE__*/React$1.createElement(Text, {
     fz: 14,
     fw: 300
-  }, subtitle) : /*#__PURE__*/React.createElement(Breadcrumbs, {
+  }, subtitle) : /*#__PURE__*/React$1.createElement(Breadcrumbs, {
     separatorMargin: "xs",
     separator: "\xB7"
   }, subtitle === null || subtitle === void 0 ? void 0 : subtitle.map((item, index) => {
-    return index < subtitle.length - 1 ? /*#__PURE__*/React.createElement(Anchor, {
+    return index < subtitle.length - 1 ? /*#__PURE__*/React$1.createElement(Anchor, {
       key: index,
       fz: 14,
       fw: 400,
       component: Link,
       to: item.link
-    }, item.name) : /*#__PURE__*/React.createElement(Text, {
+    }, item.name) : /*#__PURE__*/React$1.createElement(Text, {
       fz: 14,
       key: index,
       fw: 300,
       c: 'dimmed'
     }, item.name);
-  }))), /*#__PURE__*/React.createElement(React.Fragment, null, rightsection)));
+  }))), /*#__PURE__*/React$1.createElement(React$1.Fragment, null, rightsection)));
 };
 
 const ConnectionPanelDetail = _ref => {
@@ -12047,13 +12047,13 @@ const ConnectionPanelDetail = _ref => {
     value,
     altColor
   } = _ref;
-  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React$1.createElement(Group, null, /*#__PURE__*/React$1.createElement(Text, {
     w: 100,
     fw: 300,
     fz: "xs"
-  }, label), /*#__PURE__*/React.createElement(Text, {
+  }, label), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
-    fz: "xs",
+    fz: 'sm',
     c: altColor
   }, value));
 };
@@ -12071,35 +12071,35 @@ const ConnectionPanel = _ref => {
       altColor
     } = _ref;
     _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React$1.createElement(Card, {
     withBorder: true,
     bg: "gray.0",
     p: "lg",
     radius: "md",
     color: "red"
-  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Stack, null, /*#__PURE__*/React$1.createElement(Group, {
     align: "flex-start"
-  }, /*#__PURE__*/React.createElement(Icons, {
+  }, /*#__PURE__*/React$1.createElement(Icons, {
     size: 48,
     name: "Driver",
     stroke: "0.5"
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React$1.createElement(Stack, {
     gap: 5
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(Title, {
     fw: 400,
     order: 6
-  }, name), /*#__PURE__*/React.createElement(Group, {
+  }, name), /*#__PURE__*/React$1.createElement(Group, {
     justify: "flex-start",
     gap: 5
-  }, /*#__PURE__*/React.createElement(ColorSwatch, {
+  }, /*#__PURE__*/React$1.createElement(ColorSwatch, {
     size: 12,
     color: statusColor
-  }), /*#__PURE__*/React.createElement(Text, {
+  }), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: "xs"
-  }, status))), /*#__PURE__*/React.createElement(Space, {
+  }, status))), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1
-  }), /*#__PURE__*/React.createElement(Menu, {
+  }), /*#__PURE__*/React$1.createElement(Menu, {
     width: 190,
     transitionProps: {
       transition: "pop"
@@ -12108,52 +12108,52 @@ const ConnectionPanel = _ref => {
     withArrow: true,
     withinPortal: true,
     arrowSize: 20
-  }, /*#__PURE__*/React.createElement(Menu.Target, null, /*#__PURE__*/React.createElement(ActionIcon, {
+  }, /*#__PURE__*/React$1.createElement(Menu.Target, null, /*#__PURE__*/React$1.createElement(ActionIcon, {
     variant: "subtle",
     m: 0
-  }, /*#__PURE__*/React.createElement(Icons, {
+  }, /*#__PURE__*/React$1.createElement(Icons, {
     name: "More"
-  }))), /*#__PURE__*/React.createElement(Menu.Dropdown, null, /*#__PURE__*/React.createElement(Menu.Item, {
+  }))), /*#__PURE__*/React$1.createElement(Menu.Dropdown, null, /*#__PURE__*/React$1.createElement(Menu.Item, {
     h: 40,
     onClick: edit.onClick,
-    rightSection: /*#__PURE__*/React.createElement(Icons, {
+    rightSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "ArrowRight2"
     })
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     size: "xs",
     fw: 300
-  }, edit.label)), /*#__PURE__*/React.createElement(Menu.Item, {
+  }, edit.label)), /*#__PURE__*/React$1.createElement(Menu.Item, {
     h: 40,
     onClick: test.onClick,
-    rightSection: /*#__PURE__*/React.createElement(Icons, {
+    rightSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "ArrowRight2"
     })
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     size: "xs",
     fw: 300
-  }, test.label)), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Menu.Item, {
+  }, test.label)), /*#__PURE__*/React$1.createElement(Divider, null), /*#__PURE__*/React$1.createElement(Menu.Item, {
     h: 40,
     onClick: pause.onClick,
     c: "red",
-    leftSection: /*#__PURE__*/React.createElement(Icons, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "PauseCircle",
       color: "red"
     })
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     size: "xs",
     fw: 300
-  }, pause.label))))), /*#__PURE__*/React.createElement(Card.Section, {
+  }, pause.label))))), /*#__PURE__*/React$1.createElement(Card.Section, {
     style: {
       borderTop: "1px solid #ddd"
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     mt: 0,
     bg: "white",
     p: "md",
     gap: "lg",
     py: "lg"
   }, details.map((item, index) => {
-    return /*#__PURE__*/React.createElement(ConnectionPanelDetail, _extends({
+    return /*#__PURE__*/React$1.createElement(ConnectionPanelDetail, _extends({
       key: "detail-".concat(index)
     }, item, {
       altColor: altColor
@@ -12168,13 +12168,13 @@ const ApplicationPanelFeatures = _ref => {
     label,
     icon
   } = _ref;
-  return /*#__PURE__*/React.createElement(Group, {
+  return /*#__PURE__*/React$1.createElement(Group, {
     gap: "xs"
-  }, /*#__PURE__*/React.createElement(Icons, _extends({}, icon, {
+  }, /*#__PURE__*/React$1.createElement(Icons, _extends({}, icon, {
     color: "#aaa",
     variant: "Bulk",
     stroke: 1.5
-  })), /*#__PURE__*/React.createElement(Text, {
+  })), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     c: 'altiba',
     size: '12px',
@@ -12200,32 +12200,32 @@ const ApplicationPanel = _ref => {
       onClick = () => void 0
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React$1.createElement(Card, _extends({
     withBorder: true,
     radius: "md"
-  }, rest), /*#__PURE__*/React.createElement(Card.Section, null, /*#__PURE__*/React.createElement(Image, {
+  }, rest), /*#__PURE__*/React$1.createElement(Card.Section, null, /*#__PURE__*/React$1.createElement(Image, {
     src: coverImage,
     alt: name,
     fallbackSrc: img$5
-  })), /*#__PURE__*/React.createElement(Card.Section, {
+  })), /*#__PURE__*/React$1.createElement(Card.Section, {
     p: "md"
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     gap: "sm"
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     justify: "space-between"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     fw: 400
-  }, name), /*#__PURE__*/React.createElement(Badge, {
+  }, name), /*#__PURE__*/React$1.createElement(Badge, {
     hidden: !discount,
     fw: 300,
     variant: "outline"
-  }, discount)), /*#__PURE__*/React.createElement(Text, {
+  }, discount)), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     fz: "sm"
-  }, summary))), /*#__PURE__*/React.createElement(Card.Section, {
+  }, summary))), /*#__PURE__*/React$1.createElement(Card.Section, {
     p: "md",
     pt: 0
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     fz: "xs",
     c: "gray.5",
     mb: "xs",
@@ -12233,26 +12233,26 @@ const ApplicationPanel = _ref => {
     fw: 500,
     lts: rem("-0.25px"),
     tt: "uppercase"
-  }, featureLabel), /*#__PURE__*/React.createElement(SimpleGrid, {
+  }, featureLabel), /*#__PURE__*/React$1.createElement(SimpleGrid, {
     cols: 1,
     spacing: "xs",
     verticalSpacing: "xs"
   }, features.map((feature, index) => {
-    return /*#__PURE__*/React.createElement(ApplicationPanelFeatures, _extends({
+    return /*#__PURE__*/React$1.createElement(ApplicationPanelFeatures, _extends({
       key: index
     }, feature));
-  }))), /*#__PURE__*/React.createElement(Card.Section, {
+  }))), /*#__PURE__*/React$1.createElement(Card.Section, {
     p: "md"
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     gap: 30,
     justify: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Box, null, /*#__PURE__*/React$1.createElement(Text, {
     fz: "lg",
     fw: 500,
     style: {
       lineHeight: 1
     }
-  }, amount), /*#__PURE__*/React.createElement(Text, {
+  }, amount), /*#__PURE__*/React$1.createElement(Text, {
     fz: "xs",
     c: "dimmed",
     fw: 300,
@@ -12260,19 +12260,19 @@ const ApplicationPanel = _ref => {
       lineHeight: 1
     },
     mt: 3
-  }, "per ".concat(frequency))), /*#__PURE__*/React.createElement(Box, {
+  }, "per ".concat(frequency))), /*#__PURE__*/React$1.createElement(Box, {
     hidden: subscribed
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React$1.createElement(Button, {
     fw: 300,
-    leftSection: /*#__PURE__*/React.createElement(Icons, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "AddCircle"
     }),
     radius: "md",
     onClick: onClick
-  }, actionLabel)), /*#__PURE__*/React.createElement(Box, {
+  }, actionLabel)), /*#__PURE__*/React$1.createElement(Box, {
     hidden: !subscribed
-  }, /*#__PURE__*/React.createElement(Button, {
-    leftSection: /*#__PURE__*/React.createElement(Icons, {
+  }, /*#__PURE__*/React$1.createElement(Button, {
+    leftSection: /*#__PURE__*/React$1.createElement(Icons, {
       name: "TickCircle"
     }),
     fw: 300,
@@ -12284,52 +12284,56 @@ const ApplicationPanel = _ref => {
 
 const SubscriptionPlans = _ref => {
   let {
-    active,
+    isActive,
     title,
     altColor = "altiba.3",
     durationDays,
-    planPrice
+    planPrice,
+    buttonLabel = 'Pay Early',
+    altButtonLabel = 'Pay Now',
+    onClick
   } = _ref;
   const price = planPrice.split("/");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Indicator, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Indicator, {
     size: 20,
-    label: /*#__PURE__*/React.createElement(Icons, {
+    label: /*#__PURE__*/React$1.createElement(Icons, {
       name: "TickCircle",
       size: 18,
       stroke: 1
     }),
-    disabled: active,
+    disabled: !isActive,
     className: "payment-plan"
-  }, /*#__PURE__*/React.createElement(Card, {
-    bg: active ? "gray.1" : "white",
+  }, /*#__PURE__*/React$1.createElement(Card, {
+    bg: isActive ? "gray.1" : "white",
     p: "md",
     radius: "sm",
     withBorder: true
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React$1.createElement(Stack, {
     gap: "xl"
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     justify: "space-between",
     align: "flex-start"
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React$1.createElement(Box, null, /*#__PURE__*/React$1.createElement(Title, {
     order: 6,
     fw: 500
-  }, title), /*#__PURE__*/React.createElement(Text, {
+  }, title), /*#__PURE__*/React$1.createElement(Text, {
     fz: "xs",
     c: altColor,
     fw: 300
-  }, durationDays, " ", active ? " days remaining" : " days")), /*#__PURE__*/React.createElement(Text, {
+  }, durationDays, " ", isActive ? " days remaining" : " days")), /*#__PURE__*/React$1.createElement(Text, {
     fz: "sm",
     fw: 500
-  }, price[0], /*#__PURE__*/React.createElement(Text, {
+  }, price[0], /*#__PURE__*/React$1.createElement(Text, {
     fz: "sm",
     component: "span",
     c: "dimmed"
-  }, price[1] ? "/".concat(price[1]) : " /month"))), /*#__PURE__*/React.createElement(Button, {
+  }, price[1] ? "/".concat(price[1]) : " /month"))), /*#__PURE__*/React$1.createElement(Button, {
     w: 100,
     size: "xs",
     fw: 500,
-    variant: active ? "outline" : "filled"
-  }, durationDays > 0 ? "Pay Early" : "Pay Now")))));
+    onClick: onClick,
+    variant: isActive ? "outline" : "filled"
+  }, durationDays > 0 ? buttonLabel : altButtonLabel)))));
 };
 
 var img$4 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e%3csvg width='800px' height='800px' viewBox='0 -139.5 750 750' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3cdesc%3eCreated with Sketch.%3c/desc%3e %3cdefs%3e%3c/defs%3e %3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='amex' fill='%23393939' fill-rule='nonzero'%3e %3cpath d='M52.8846154%2c28.2035928 C39.6085397%2c28.2035928 28.8461538%2c38.7262417 28.8461538%2c51.7065868 L28.8461538%2c419.293413 C28.8461538%2c432.273758 39.6085397%2c442.796407 52.8846154%2c442.796407 L697.115385%2c442.796407 C710.39146%2c442.796407 721.153846%2c432.273758 721.153846%2c419.293413 L721.153846%2c51.7065868 C721.153846%2c38.7262417 710.39146%2c28.2035928 697.115385%2c28.2035928 L52.8846154%2c28.2035928 Z M52.8846154%2c0 L697.115385%2c0 C726.322751%2c-5.0099645e-15 750%2c23.1498275 750%2c51.7065868 L750%2c419.293413 C750%2c447.850173 726.322751%2c471 697.115385%2c471 L52.8846154%2c471 C23.6772488%2c471 3.41607085e-15%2c447.850173 0%2c419.293413 L0%2c51.7065868 C-3.41607085e-15%2c23.1498275 23.6772488%2c5.0099645e-15 52.8846154%2c0 Z' id='Rectangle-1'%3e%3c/path%3e %3cg id='Group' transform='translate(27.000000%2c 109.000000)'%3e %3cpath d='M1.00185169%2c114.13736 L34.3337698%2c114.13736 L41.8494525%2c96.0854168 L58.6754244%2c96.0854168 L66.1714134%2c114.13736 L131.754546%2c114.13736 L131.754546%2c100.336105 L137.608557%2c114.196192 L171.654379%2c114.196192 L177.508389%2c100.13019 L177.508389%2c114.13736 L340.495068%2c114.13736 L340.418753%2c84.5051101 L343.572239%2c84.5051101 C345.780417%2c84.5811032 346.425392%2c84.7845674 346.425392%2c88.4150574 L346.425392%2c114.13736 L430.722649%2c114.13736 L430.722649%2c107.239184 C437.521967%2c110.867222 448.097589%2c114.13736 462.013787%2c114.13736 L497.477569%2c114.13736 L505.067105%2c96.0854168 L521.893076%2c96.0854168 L529.315214%2c114.13736 L597.655492%2c114.13736 L597.655492%2c96.9899751 L608.004634%2c114.13736 L662.768433%2c114.13736 L662.768433%2c0.785672 L608.570834%2c0.785672 L608.570834%2c14.1726435 L600.981299%2c0.785672 L545.3682%2c0.785672 L545.3682%2c14.1726435 L538.399022%2c0.785672 L463.279121%2c0.785672 C450.704568%2c0.785672 439.651369%2c2.53350409 430.722649%2c7.40439063 L430.722649%2c0.785672 L378.883394%2c0.785672 L378.883394%2c7.40439063 C373.201705%2c2.38397078 365.459542%2c0.785672 356.850848%2c0.785672 L167.462041%2c0.785672 L154.754555%2c30.0624712 L141.704887%2c0.785672 L82.0520781%2c0.785672 L82.0520781%2c14.1726435 L75.4989347%2c0.785672 L24.6246793%2c0.785672 L0.99939%2c54.6792028 L0.99939%2c114.13736 L1.00185169%2c114.13736 Z M211.404045%2c97.7872512 L191.404894%2c97.7872512 L191.331043%2c34.134787 L163.043223%2c97.7872512 L145.914458%2c97.7872512 L117.552787%2c34.0784061 L117.552787%2c97.7872512 L77.874511%2c97.7872512 L70.3785219%2c79.6593152 L29.7598625%2c79.6593152 L22.1875597%2c97.7872512 L0.99939%2c97.7872512 L35.9338988%2c16.5142875 L64.9183893%2c16.5142875 L98.0976798%2c93.4630208 L98.0976798%2c16.5142875 L129.937785%2c16.5142875 L155.468458%2c71.6482149 L178.921427%2c16.5142875 L211.401583%2c16.5142875 L211.401583%2c97.7872512 L211.404045%2c97.7872512 Z M63.7112913%2c62.7923309 L50.3588303%2c30.3924772 L37.082683%2c62.7923309 L63.7112913%2c62.7923309 Z M290.995623%2c97.7872512 L225.826062%2c97.7872512 L225.826062%2c16.5142875 L290.995623%2c16.5142875 L290.995623%2c33.4385966 L245.335327%2c33.4385966 L245.335327%2c48.0880268 L289.90015%2c48.0880268 L289.90015%2c64.7475871 L245.335327%2c64.7475871 L245.335327%2c80.9781567 L290.995623%2c80.9781567 L290.995623%2c97.7872512 Z M382.833608%2c38.4026356 C382.833608%2c51.3606156 374.1486%2c58.0553273 369.087269%2c60.0654563 C373.355921%2c61.6833654 377.001753%2c64.5416719 378.737277%2c66.9097023 C381.491962%2c70.9520236 381.967077%2c74.5629023 381.967077%2c81.8214305 L381.967077%2c97.7872512 L362.290413%2c97.7872512 L362.216561%2c87.5380426 C362.216561%2c82.6475448 362.686753%2c75.6145431 359.136929%2c71.7045958 C356.286237%2c68.8462902 351.941271%2c68.2260919 344.917936%2c68.2260919 L323.975939%2c68.2260919 L323.975939%2c97.7872512 L304.469136%2c97.7872512 L304.469136%2c16.5142875 L349.339215%2c16.5142875 C359.30925%2c16.5142875 366.655073%2c16.7765845 372.962043%2c20.4070745 C379.133618%2c24.0375645 382.833608%2c29.3374416 382.833608%2c38.4026356 Z M358.172965%2c50.470979 C355.492133%2c52.0913399 352.321416%2c52.1452699 348.522956%2c52.1452699 L324.823814%2c52.1452699 L324.823814%2c34.093327 L348.845443%2c34.093327 C352.245102%2c34.093327 355.792465%2c34.2453131 358.096651%2c35.5592508 C360.627317%2c36.7432665 362.192981%2c39.263282 362.192981%2c42.7442378 C362.192981%2c46.2962838 360.70363%2c49.1545894 358.172965%2c50.470979 Z M414.120367%2c97.7872512 L394.214762%2c97.7872512 L394.214762%2c16.5142875 L414.120367%2c16.5142875 L414.120367%2c97.7872512 Z M645.195722%2c97.7872512 L617.550416%2c97.7872512 L580.572666%2c36.7871775 L580.572666%2c97.7872512 L540.842694%2c97.7872512 L533.250697%2c79.6593152 L492.725584%2c79.6593152 L485.360067%2c97.7872512 L462.532381%2c97.7872512 C453.049769%2c97.7872512 441.043878%2c95.6986772 434.244561%2c88.7980504 C427.388624%2c81.8974235 423.821567%2c72.5503214 423.821567%2c57.7709672 C423.821567%2c45.7175456 425.953432%2c34.6986044 434.338108%2c25.9913117 C440.645077%2c19.504968 450.521566%2c16.5142875 463.965111%2c16.5142875 L482.851557%2c16.5142875 L482.851557%2c33.9288719 L464.361451%2c33.9288719 C457.242107%2c33.9288719 453.222091%2c34.9829635 449.349779%2c38.7433766 C446.023972%2c42.1654996 443.741943%2c48.6346839 443.741943%2c57.1532208 C443.741943%2c65.8605125 445.479929%2c72.1384901 449.106068%2c76.2396441 C452.109386%2c79.455851 457.567057%2c80.4314997 462.70224%2c80.4314997 L471.463562%2c80.4314997 L498.958702%2c16.5167384 L528.189366%2c16.5167384 L561.21849%2c93.3894796 L561.21849%2c16.5167384 L590.921808%2c16.5167384 L625.213803%2c73.1190406 L625.213803%2c16.5167384 L645.195722%2c16.5167384 L645.195722%2c97.7872512 Z M526.615482%2c62.7923309 L513.115317%2c30.3924772 L499.689004%2c62.7923309 L526.615482%2c62.7923309 Z' id='Path'%3e%3c/path%3e %3cpath d='M694.908287%2c227.558349 C690.169443%2c234.458977 680.935468%2c237.957092 668.434768%2c237.957092 L630.760346%2c237.957092 L630.760346%2c220.525348 L668.282141%2c220.525348 C672.004287%2c220.525348 674.608804%2c220.037524 676.176931%2c218.512767 C677.53581%2c217.25521 678.483578%2c215.428934 678.483578%2c213.210438 C678.483578%2c210.842408 677.53581%2c208.962201 676.100617%2c207.834568 C674.685118%2c206.59417 672.624644%2c206.030354 669.227447%2c206.030354 C650.909663%2c205.410156 628.057359%2c206.59417 628.057359%2c180.869417 C628.057359%2c169.078292 635.575503%2c156.666969 656.047307%2c156.666969 L694.905825%2c156.666969 L694.908287%2c140.492781 L658.801992%2c140.492781 C647.906344%2c140.492781 639.99186%2c143.091241 634.386485%2c147.131111 L634.386485%2c140.492781 L580.984025%2c140.492781 C572.44426%2c140.492781 562.420068%2c142.600965 557.678762%2c147.131111 L557.678762%2c140.492781 L462.315997%2c140.492781 L462.315997%2c147.131111 C454.726462%2c141.679248 441.920507%2c140.492781 436.009877%2c140.492781 L373.107574%2c140.492781 L373.107574%2c147.131111 C367.103398%2c141.340957 353.750937%2c140.492781 345.612434%2c140.492781 L275.214144%2c140.492781 L259.104537%2c157.853435 L244.016551%2c140.492781 L138.856074%2c140.492781 L138.856074%2c253.922913 L242.037315%2c253.922913 L258.636807%2c236.287704 L274.273761%2c253.922913 L337.875196%2c253.979294 L337.875196%2c227.296052 L344.128008%2c227.296052 C352.566841%2c227.425975 362.519644%2c227.087685 371.300659%2c223.307661 L371.300659%2c253.920461 L423.760273%2c253.920461 L423.760273%2c224.356851 L426.290938%2c224.356851 C429.520738%2c224.356851 429.838302%2c224.489225 429.838302%2c227.70298 L429.838302%2c253.91801 L589.201303%2c253.91801 C599.319042%2c253.91801 609.894664%2c251.339161 615.751136%2c246.659482 L615.751136%2c253.91801 L666.300442%2c253.91801 C676.819444%2c253.91801 687.092272%2c252.449635 694.908287%2c248.689222 L694.908287%2c227.558349 Z M378.926897%2c183.927906 C378.926897%2c206.509994 362.007379%2c211.172514 344.954927%2c211.172514 L320.613273%2c211.172514 L320.613273%2c238.439183 L282.695139%2c238.439183 L258.67351%2c211.527963 L233.709035%2c238.439183 L156.435114%2c238.439183 L156.435114%2c157.146609 L234.898055%2c157.146609 L258.89999%2c183.79308 L283.714298%2c157.146609 L346.0504%2c157.146609 C361.532264%2c157.146609 378.926897%2c161.414457 378.926897%2c183.927906 Z M223.829062%2c221.339997 L175.864579%2c221.339997 L175.864579%2c205.165809 L218.693878%2c205.165809 L218.693878%2c188.57979 L175.864579%2c188.57979 L175.864579%2c173.800436 L224.774368%2c173.800436 L246.112704%2c197.490547 L223.829062%2c221.339997 Z M301.113434%2c230.648291 L271.161481%2c197.535087 L301.113434%2c165.473523 L301.113434%2c230.648291 Z M345.408399%2c194.502317 L320.197751%2c194.502317 L320.197751%2c173.800436 L345.634879%2c173.800436 C352.677909%2c173.800436 357.566917%2c176.658742 357.566917%2c183.767736 C357.566917%2c190.798286 352.904388%2c194.502317 345.408399%2c194.502317 Z M477.4839%2c157.146609 L542.59438%2c157.146609 L542.59438%2c173.958154 L496.911928%2c173.958154 L496.911928%2c188.737509 L541.479213%2c188.737509 L541.479213%2c205.323528 L496.911928%2c205.323528 L496.911928%2c221.497714 L542.59438%2c221.571256 L542.59438%2c238.439183 L477.4839%2c238.439183 L477.4839%2c157.146609 Z M452.452415%2c200.661007 C456.794918%2c202.256854 460.344743%2c205.117612 462.008877%2c207.485642 C464.763561%2c211.454422 465.162362%2c215.158453 465.241138%2c222.323829 L465.241138%2c238.439183 L445.655559%2c238.439183 L445.655559%2c228.268419 C445.655559%2c223.377921 446.128213%2c216.136553 442.502074%2c212.356528 C439.651382%2c209.444293 435.306417%2c208.748102 428.189535%2c208.748102 L407.341085%2c208.748102 L407.341085%2c238.439183 L387.738274%2c238.439183 L387.738274%2c157.146609 L432.778213%2c157.146609 C442.654702%2c157.146609 449.847897%2c157.580502 456.250875%2c160.983014 C462.407679%2c164.687045 466.27999%2c169.761396 466.27999%2c179.034957 C466.277529%2c192.010097 457.587597%2c198.631267 452.452415%2c200.661007 Z M441.42487%2c190.384004 C438.815429%2c191.92592 435.588092%2c192.058295 431.792093%2c192.058295 L408.092952%2c192.058295 L408.092952%2c173.800436 L432.114581%2c173.800436 C435.588092%2c173.800436 439.064065%2c173.873978 441.42487%2c175.268812 C443.953074%2c176.585201 445.46458%2c179.102766 445.46458%2c182.58127 C445.46458%2c186.059775 443.953074%2c188.861698 441.42487%2c190.384004 Z M617.536604%2c195.562142 C621.335064%2c199.476992 623.370921%2c204.418969 623.370921%2c212.78552 C623.370921%2c230.273646 612.398959%2c238.436732 592.724758%2c238.436732 L554.727848%2c238.436732 L554.727848%2c221.004988 L592.572131%2c221.004988 C596.272121%2c221.004988 598.896333%2c220.517164 600.540772%2c218.992407 C601.882419%2c217.734851 602.844958%2c215.908574 602.844958%2c213.690078 C602.844958%2c211.322047 601.803643%2c209.441841 600.464459%2c208.314207 C598.972646%2c207.073811 596.914634%2c206.509994 593.517437%2c206.509994 C575.273505%2c205.889795 552.426124%2c207.073811 552.426124%2c181.349057 C552.426124%2c169.557932 559.865493%2c157.146609 580.317603%2c157.146609 L619.427218%2c157.146609 L619.427218%2c174.44843 L583.640948%2c174.44843 C580.093586%2c174.44843 577.786938%2c174.580805 575.824934%2c175.916805 C573.688146%2c177.233195 572.895467%2c179.186942 572.895467%2c181.765791 C572.895467%2c184.832464 574.709767%2c186.918586 577.164119%2c187.820693 C579.22213%2c188.534044 581.43277%2c188.742411 584.756115%2c188.742411 L595.257885%2c189.02432 C605.848277%2c189.281714 613.117786%2c191.105539 617.536604%2c195.562142 Z M694.948587%2c173.800436 L659.393721%2c173.800436 C655.843896%2c173.800436 653.485552%2c173.932811 651.498931%2c175.268812 C649.440918%2c176.585201 648.648239%2c178.538949 648.648239%2c181.117798 C648.648239%2c184.18447 650.386226%2c186.270593 652.914429%2c187.1727 C654.972441%2c187.886051 657.183081%2c188.094418 660.432574%2c188.094418 L671.005734%2c188.376326 C681.674901%2c188.638623 688.796706%2c190.464899 693.139211%2c194.919051 C693.929428%2c195.539251 694.404543%2c196.235441 694.948587%2c196.931632 L694.948587%2c173.800436 Z' id='Path'%3e%3c/path%3e %3c/g%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
@@ -12344,83 +12348,166 @@ var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!
 
 const PaymentMethod = _ref => {
   let {
-    active,
+    isActive,
     pan,
     type,
     exp
   } = _ref;
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React$1.createElement(Card, {
     withBorder: true,
     radius: "md",
     p: 0,
-    bg: active ? "gray.1" : "white",
+    bg: isActive ? "gray.1" : "white",
     w: 330
-  }, /*#__PURE__*/React.createElement(Group, {
+  }, /*#__PURE__*/React$1.createElement(Group, {
     gap: "md",
     px: "sm"
-  }, /*#__PURE__*/React.createElement(Center, {
+  }, /*#__PURE__*/React$1.createElement(Center, {
     h: 88,
     w: 80
-  }, logo[type]), /*#__PURE__*/React.createElement(Stack, {
+  }, logo[type]), /*#__PURE__*/React$1.createElement(Stack, {
     gap: 3
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     fz: 14,
     tt: "uppercase",
     fw: 500
-  }, "**** **** **** ".concat(pan)), /*#__PURE__*/React.createElement(Group, {
+  }, "**** **** **** ".concat(pan)), /*#__PURE__*/React$1.createElement(Group, {
     c: "dimmed"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React$1.createElement(Text, {
     tt: "capitalize",
     fw: 300,
     size: "xs"
-  }, type), /*#__PURE__*/React.createElement(Text, {
+  }, type), /*#__PURE__*/React$1.createElement(Text, {
     fw: 300,
     size: "sm"
-  }, exp))), /*#__PURE__*/React.createElement(Space, {
+  }, exp))), /*#__PURE__*/React$1.createElement(Space, {
     flex: 1
-  }), /*#__PURE__*/React.createElement(ActionIcon, {
+  }), /*#__PURE__*/React$1.createElement(ActionIcon, {
     variant: "subtle",
-    disabled: active
-  }, !active ? /*#__PURE__*/React.createElement(Icons, {
+    disabled: isActive
+  }, !isActive ? /*#__PURE__*/React$1.createElement(Icons, {
     name: "Record"
-  }) : /*#__PURE__*/React.createElement(Icons, {
+  }) : /*#__PURE__*/React$1.createElement(Icons, {
     name: "TickCircle"
   }))));
 };
 const logo = {
-  mastercard: /*#__PURE__*/React.createElement(Image, {
+  mastercard: /*#__PURE__*/React$1.createElement(Image, {
     height: 60,
     src: img$2
   }),
-  visa: /*#__PURE__*/React.createElement(Image, {
+  visa: /*#__PURE__*/React$1.createElement(Image, {
     height: 60,
     src: img$3
   }),
-  amex: /*#__PURE__*/React.createElement(Image, {
+  amex: /*#__PURE__*/React$1.createElement(Image, {
     height: 60,
     src: img$4
   }),
-  paypal: /*#__PURE__*/React.createElement(Image, {
+  paypal: /*#__PURE__*/React$1.createElement(Image, {
     height: 60,
     src: img$1
   }),
-  verve: /*#__PURE__*/React.createElement(Image, {
+  verve: /*#__PURE__*/React$1.createElement(Image, {
     height: 60,
     src: img
   })
 };
 const PaymentMethodAdd = () => {
-  return /*#__PURE__*/React.createElement(Group, {
+  return /*#__PURE__*/React$1.createElement(Group, {
     align: "center"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React$1.createElement(Button, {
     variant: "outline",
     w: 60,
     h: 60
-  }, /*#__PURE__*/React.createElement(Icons, {
+  }, /*#__PURE__*/React$1.createElement(Icons, {
     name: "Add",
     size: 60,
     stroke: 1
   })));
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleColumn, SimplePanel, SimpleText, StackedColumn, SubscriptionPlans, TitledPanel, UserMenu, theme };
+const SimpleHeader = _ref => {
+  let {
+    id,
+    label
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Table.Th, {
+    fw: 500,
+    id: id,
+    fz: "xs",
+    tt: "uppercase"
+  }, label)
+  //TODO: Manage control of table width from here
+  ;
+};
+
+const SimpleBody = _ref => {
+  let {
+    row,
+    columns,
+    withAction,
+    withIndex,
+    actionFn,
+    index
+  } = _ref;
+  if (withAction && actionFn) {
+    row["action"] = actionFn;
+  }
+  if (withIndex) {
+    row["index"] = "".concat(index ? index + 1 : 1);
+  }
+  return /*#__PURE__*/React$1.createElement(Table.Tr, {
+    fw: 300,
+    fz: "sm",
+    h: 50
+  }, columns.map((column, index) => {
+    const columnIndex = column.id;
+    console.log("column: ".concat(column.id, ", type: ").concat(typeof row[column.id]));
+    return /*#__PURE__*/React$1.createElement(Table.Td, {
+      key: index
+    }, typeof row[columnIndex] === "string" ? row[columnIndex] : row[columnIndex](columnIndex));
+  }));
+};
+
+//TODO: Add rowId and cellId to enable onclick attributes
+
+const SimpleTable = _ref => {
+  let {
+    columns,
+    rows,
+    withAction,
+    withIndex,
+    actionFn
+  } = _ref;
+  columns.sort((a, b) => a.order - b.order);
+  const indexColumn = {
+    order: -99,
+    id: "index",
+    label: "Id"
+  };
+  const actionColumn = {
+    order: 99999,
+    id: "action",
+    label: ""
+  };
+  withIndex ? columns.unshift(indexColumn) : null;
+  withAction && actionFn ? columns.push(actionColumn) : null;
+  return /*#__PURE__*/React$1.createElement(Table, null, /*#__PURE__*/React$1.createElement(Table.Thead, null, /*#__PURE__*/React$1.createElement(Table.Tr, null, columns.map((column, index) => {
+    return /*#__PURE__*/React$1.createElement(SimpleHeader, _extends({
+      key: "column-".concat(index)
+    }, column));
+  }))), /*#__PURE__*/React$1.createElement(Table.Tbody, null, rows.map((row, index) => {
+    return /*#__PURE__*/React$1.createElement(SimpleBody, {
+      key: index,
+      row,
+      columns,
+      withAction,
+      withIndex,
+      actionFn,
+      index
+    });
+  })));
+};
+
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitledPanel, UserMenu, theme };