@hexure/ui 1.7.0 → 1.8.1

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useDebugValue, useContext, createElement, useState, useEffect } from 'react';
-import Icon from '@mdi/react';
-import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronLeft, mdiChevronRight, mdiCheck } from '@mdi/js';
+import Icon, { Icon as Icon$1 } from '@mdi/react';
+import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiDotsHorizontal, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronRight, mdiChevronLeft, mdiCheck } from '@mdi/js';
 import Numeral from 'numeral';
 import 'moment';
 
@@ -20,16 +20,6 @@ PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise */
 
-var __assign = function () {
-  __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
 function __rest(s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -38,25 +28,6 @@ function __rest(s, e) {
   }
   return t;
 }
-function __spreadArray(to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-}
-function __makeTemplateObject(cooked, raw) {
-  if (Object.defineProperty) {
-    Object.defineProperty(cooked, "raw", {
-      value: raw
-    });
-  } else {
-    cooked.raw = raw;
-  }
-  return cooked;
-}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1991,7 +1962,7 @@ var qe = function (e) {
 "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"), "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window["__styled-components-init__"] = window["__styled-components-init__"] || 0, 1 === window["__styled-components-init__"] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window["__styled-components-init__"] += 1);
 var styled = qe;
 
-var Colors = {
+const Colors = {
     PRIMARY: {
         Hex: '#0193D7',
         Rgb: '1, 147, 215',
@@ -2029,28 +2000,44 @@ var Colors = {
         Rgb: '245, 245, 245',
     },
 };
-var FontStyles = {
+const FontStyles = {
     DEFAULT: '"Roboto", Helvetica, Arial, sans-serif',
     HEADING: '"Roboto Slab", "Roboto", Helvetica, Arial, sans-serif',
 };
-var FontSizes = {
+const FontSizes = {
     DEFAULT: '14px',
     SMALL: '13px',
 };
 
-var Header$3 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  background: #f5f5f5;\n  border: 1px solid #e5e5e5;\n  padding: 14px 20px;\n  height: 50px;\n  cursor: pointer;\n"])));
-var Title$1 = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  font-family: ", ";\n  box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
-var Accordion = function (_a) {
-    var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
+const Header$3 = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  padding: 14px 20px;
+  height: 50px;
+  cursor: pointer;
+`;
+const Title$1 = styled.div `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  font-family: ${FontStyles.DEFAULT};
+  box-sizing: border-box;
+`;
+const Accordion = (_a) => {
+    var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header$3, __assign({ onClick: onClick }, accessibleProps),
+        React.createElement(Header$3, Object.assign({ onClick: onClick }, accessibleProps),
             React.createElement(Title$1, null, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
         open ? children : null));
-};
-var templateObject_1$q, templateObject_2$n;
+};
 
-var button_type_mapping = {
+const button_type_mapping = {
     primary: {
         background_color: Colors.PRIMARY.Hex,
         border_color: Colors.PRIMARY.Hex,
@@ -2073,7 +2060,12 @@ var button_type_mapping = {
         badge_content_color: Colors.RED.Hex,
     },
 };
-var StyledButton = styled.button(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"], ["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
+const StyledButton = styled.button `
+  height: ${props => (props.$small ? '30px' : '40px')};
+  line-height: 1em;
+  border-radius: ${props => (props.$small ? '15px' : '20px')};
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => {
     if (props.$hasChildren) {
         if (props.$small) {
             return '0 10px';
@@ -2083,9 +2075,10 @@ var StyledButton = styled.button(templateObject_1$p || (templateObject_1$p = __m
         }
     }
     return '0px';
-}, function (props) {
-    return props.$format ? button_type_mapping[props.$format].background_color : Colors.PRIMARY.Hex;
-}, function (props) {
+}};
+  outline: none;
+  background: ${props => props.$format ? button_type_mapping[props.$format].background_color : Colors.PRIMARY.Hex};
+  width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
     }
@@ -2093,84 +2086,201 @@ var StyledButton = styled.button(templateObject_1$p || (templateObject_1$p = __m
         return '30px';
     }
     return '40px';
-}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
-    return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
-}, function (props) { return (props.$disabled ? 0.6 : 1); });
-var Label$4 = styled.span(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: 1;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: 1;\n"])), function (props) { return (props.$format ? button_type_mapping[props.$format].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT);
-var StyledIcon$3 = styled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
-var Badge$1 = styled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  font-family: ", ";\n  letter-spacing: -1px;\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  font-family: ", ";\n  letter-spacing: -1px;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) { return (props.$small ? '20px' : '24px'); }, function (props) { return (props.$small ? '20px' : '24px'); }, function (props) {
-    return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
-}, function (props) {
-    return props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex;
-}, function (props) { return (props.$small ? '10px' : '12px'); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '5px' : '10px'); }, function (props) { return (props.$small ? '-5px' : '-10px'); });
-var Button = function (_a) {
-    var badge = _a.badge, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isForm, isForm = _c === void 0 ? false : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.margin, margin = _e === void 0 ? '' : _e, onClick = _a.onClick, _f = _a.small, small = _f === void 0 ? false : _f, _g = _a.format, format = _g === void 0 ? 'primary' : _g, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
-    var has_children = children && children.length > 0;
-    return (React.createElement(StyledButton, __assign({ "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
+}};
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex};
+  box-sizing: border-box;
+  &:hover {
+    opacity: ${props => (props.$disabled ? 0.6 : 1)};
+  }
+`;
+const Label$4 = styled.span `
+  color: ${props => (props.$format ? button_type_mapping[props.$format].content_color : '#fff')};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 1;
+`;
+const StyledIcon$3 = styled.span `
+  margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
+  margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`;
+const Badge$1 = styled.span `
+  width: ${props => (props.$small ? '20px' : '24px')};
+  height: ${props => (props.$small ? '20px' : '24px')};
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${props => props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff'};
+  color: ${props => props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex};
+  font-size: ${props => (props.$small ? '10px' : '12px')};
+  font-weight: 600;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: -1px;
+  margin-left: ${props => (props.$small ? '5px' : '10px')};
+  margin-right: ${props => (props.$small ? '-5px' : '-10px')};
+`;
+const Button = (_a) => {
+    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
+    const has_children = children && children.length > 0;
+    return (React.createElement(StyledButton, Object.assign({ "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
         children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
-};
-var templateObject_1$p, templateObject_2$m, templateObject_3$i, templateObject_4$9;
+};
 
-var StyledComponent = styled.p(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"])), function (props) { return Colors[props.$color || 'BLACK'].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
-    return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
-}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
-var Copy = function (_a) {
-    var children = _a.children, _b = _a.align, align = _b === void 0 ? '' : _b, _c = _a.margin, margin = _c === void 0 ? '' : _c, _d = _a.padding, padding = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, _f = _a.color, color = _f === void 0 ? 'BLACK' : _f;
+const StyledComponent = styled.p `
+  color: ${props => Colors[props.$color || 'BLACK'].Hex};
+  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
+  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
+  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
+  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  text-align: ${props => props.$align || 'left'};
+  box-sizing: border-box;
+`;
+const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
     return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
 };
 Copy.defaultProps = {
     type: 'default',
-};
-var templateObject_1$o;
+};
 
-var H1 = styled.h1(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var H2 = styled.h2(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var H3 = styled.h3(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var Heading = function (_a) {
-    var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
+const H1 = styled.h1 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 30px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.4em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H2 = styled.h2 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 24px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H3 = styled.h3 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 18px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const Heading = (_a) => {
+    var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
     switch (type) {
         case 'secondary': {
-            return (React.createElement(H2, __assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
         }
         case 'tertiary': {
-            return (React.createElement(H3, __assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
         }
         default: {
-            return (React.createElement(H1, __assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
         }
     }
 };
 Heading.defaultProps = {
     bold: false,
     type: 'primary',
-};
-var templateObject_1$n, templateObject_2$l, templateObject_3$h;
-
-var Wrapper$g = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])));
-var Container$3 = styled.dialog(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"], ["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"])));
-var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
-var ActionDialog = function (_a) {
-    var description = _a.description, title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
-    return (React.createElement(Wrapper$g, __assign({}, accessibleProps),
+};
+
+const Wrapper$h = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+const Container$3 = styled.dialog `
+  max-width: 600px;
+  width: auto;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: relative;
+  padding: 40px;
+  text-align: center;
+  box-sizing: border-box;
+`;
+const Buttons = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  box-sizing: border-box;
+`;
+const ActionDialog = (_a) => {
+    var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps),
         React.createElement(Container$3, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons, null,
-                tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
-                secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
-                primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
-};
-var templateObject_1$m, templateObject_2$k, templateObject_3$g;
-
-var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"], ["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
-var Content$2 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  margin-left: 20px;\n"], ["\n  margin-left: 20px;\n"])));
-var Action$1 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  margin-top: 6px;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
-var Alert = function (_a) {
-    var action = _a.action, _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["action", "type", "title", "description"]);
-    var type_mapping = {
+                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
+                secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
+                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
+};
+
+const Wrapper$g = styled.div `
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  border-left-width: 4px;
+  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: flex-start;
+  padding: 20px;
+  box-sizing: border-box;
+`;
+const Content$3 = styled.div `
+  margin-left: 20px;
+`;
+const Action$1 = styled.div `
+  color: ${Colors.PRIMARY.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 6px;
+`;
+const Alert = (_a) => {
+    var { action, type = 'info', title, description } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description"]);
+    const type_mapping = {
         info: {
             color: Colors.PRIMARY.Hex,
             icon: mdiInformationOutline,
@@ -2188,90 +2298,237 @@ var Alert = function (_a) {
             icon: mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$f, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
         React.createElement("div", { style: { flexShrink: 0 } },
             React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
-        React.createElement(Content$2, null,
+        React.createElement(Content$3, null,
             title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
             action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
-};
-var templateObject_1$l, templateObject_2$j, templateObject_3$f;
-
-var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
-var Left = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"])));
-var Info = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 30px;\n"])));
-var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
-var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
-var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"])));
-var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"])), Colors.RED.Rgb);
-var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
-var BulkActionBar = function (_a) {
-    var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
-    return (React.createElement(Wrapper$e, __assign({}, accessibleProps),
+};
+
+const Wrapper$f = styled.div `
+  border: 1px solid ${Colors.PRIMARY.Hex};
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+`;
+const Left = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+`;
+const Info$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-right: 30px;
+`;
+const Selected = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  line-height: 1;
+`;
+const Clear = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.PRIMARY.Hex};
+  line-height: 1;
+  cursor: pointer;
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ccc;
+`;
+const Actions$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+`;
+const Error$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: rgba(${Colors.RED.Rgb}, 0.1);
+  border-radius: 4px;
+  padding: 6px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 30px;
+`;
+const ErrorMsg = styled.span `
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.RED.Hex};
+  margin-left: 8px;
+`;
+const BulkActionBar = (_a) => {
+    var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
+    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
-            React.createElement(Info, null,
+            React.createElement(Info$1, null,
                 React.createElement(Selected, null,
                     selectedCount,
                     " Selected"),
                 onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
-            React.createElement(Actions, null, actions.map(function (action) { return (React.createElement(Button, __assign({}, action, { small: true }))); }))),
+            React.createElement(Actions$1, null, actions.map(action => (React.createElement(Button, Object.assign({}, action, { small: true })))))),
         errorMsg ? (React.createElement(Error$1, null,
             React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));
-};
-var templateObject_1$k, templateObject_2$i, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
-
-var Wrapper$d = styled.label(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"], ["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
-var Input$2 = styled.input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"], ["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"])));
-var Label$3 = styled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.6em;\n  color: ", ";\n  margin-left: 6px;\n  box-sizing: border-box;\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.6em;\n  color: ", ";\n  margin-left: 6px;\n  box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
-var Checkbox = function (_a) {
-    var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
+};
+
+const Wrapper$e = styled.div `
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: ${props => props.$maxHeight || '312px'};
+  padding: 10px;
+  width: 200px;
+`;
+const MenuItem = styled.div `
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  display: flex;
+  gap: 8px;
+  height: 38px;
+  padding: 8px;
+  &:hover {
+    background: rgba(1, 147, 215, 0.1);
+    cursor: pointer;
+
+    svg,
+    path {
+      fill: ${Colors.PRIMARY.Hex} !important;
+    }
+  }
+`;
+const Title = styled.span `
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 400;
+  height: auto;
+  letter-spacing: 0px;
+  line-height: 22px;
+  text-align: left;
+`;
+const MoreMenu = (_a) => {
+    var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
+    return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item) => {
+        return (React.createElement(MenuItem, { onClick: item.onClick },
+            item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
+            React.createElement(Title, null, item.label)));
+    })));
+};
+
+const Wrapper$d = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledMoreMenu = styled(MoreMenu) `
+  position: absolute;
+  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
+  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
+  top: ${props => (props.$small ? '30px' : '40px')};
+  z-index: 10;
+`;
+const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', }) => {
+    const [show_menu, toggleMenu] = useState(false);
+    return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
+        React.createElement(Button, { disabled: disabled, format: 'primary', icon: mdiDotsHorizontal, small: small }, label),
+        show_menu ? (React.createElement(StyledMoreMenu, { "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
+};
+
+const Wrapper$c = styled.label `
+  padding: 4px 0;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: flex-start;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6em;
+  box-sizing: border-box;
+`;
+const Input$2 = styled.input `
+  font-size: 20px;
+  margin: 5px 0px 0px 0px;
+  line-height: 1.1em;
+  box-sizing: border-box;
+`;
+const Label$3 = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+  margin-left: 6px;
+  box-sizing: border-box;
+`;
+const Checkbox = (_a) => {
+    var { children, disabled, checked, onChange } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
+    return (React.createElement(Wrapper$c, Object.assign({}, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
         children ? React.createElement(Label$3, null, children) : null));
-};
-var templateObject_1$j, templateObject_2$h, templateObject_3$d;
-
-var SelectAll = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  padding: 8px 12px;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n"], ["\n  padding: 8px 12px;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
-var Options$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  padding: 12px;\n  box-sizing: border-box;\n"], ["\n  padding: 12px;\n  box-sizing: border-box;\n"])));
-var Checklist = function (_a) {
-    var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, _b = _a.selected, selected = _b === void 0 ? [] : _b, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
-    var values = options.map(function (option) { return option.value; });
-    var selected_options = options.filter(function (o) { return selected.includes(o.value); });
-    var handleToggleAll = function () {
+};
+
+const SelectAll = styled.div `
+  padding: 8px 12px;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  box-sizing: border-box;
+`;
+const Options$1 = styled.div `
+  padding: 12px;
+  box-sizing: border-box;
+`;
+const Checklist = (_a) => {
+    var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
+    const values = options.map((option) => option.value);
+    const selected_options = options.filter(o => selected.includes(o.value));
+    const handleToggleAll = () => {
         if (selected_options.length === options.length) {
             triggerChange([]);
         }
         else {
-            triggerChange(options.map(function (option) { return option.value; }));
+            triggerChange(options.map((option) => option.value));
         }
     };
-    var handleChange = function (option) {
-        var new_selected = selected_options.filter(function (o) { return o.value !== option.value; }).map(function (o) { return o.value; });
+    const handleChange = (option) => {
+        const new_selected = selected_options.filter(o => o.value !== option.value).map(o => o.value);
         if (!selected.includes(option.value)) {
             new_selected.push(option.value);
         }
         // Mimic input event so it's easier to share onChange methods
         triggerChange(new_selected);
     };
-    var triggerChange = function (value) {
+    const triggerChange = (value) => {
         onChange({
             target: {
-                value: value,
+                value,
             },
         });
     };
     return (React.createElement(React.Fragment, null,
         showSelectAll && values.length ? (React.createElement(SelectAll, null,
             React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
-        React.createElement(Options$1, null, options.map(function (option, i) {
-            var label = "".concat(option.label || option.value);
-            var checked = selected.includes(option.value);
-            return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
+        React.createElement(Options$1, null, options.map((option, i) => {
+            const label = `${option.label || option.value}`;
+            const checked = selected.includes(option.value);
+            return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
-};
-var templateObject_1$i, templateObject_2$g;
+};
 
 var dayjs_min = {exports: {}};
 
@@ -2591,51 +2848,82 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  border-radius: 4px;\n  height: 40px;\n  background-color: ", ";\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", ";\n  flex-grow: ", ";\n  box-sizing: border-box;\n  padding: 10px 0px;\n  display: flex;\n  align-items: center;\n  width: ", ";\n"], ["\n  border-radius: 4px;\n  height: 40px;\n  background-color: ", ";\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", ";\n  flex-grow: ", ";\n  box-sizing: border-box;\n  padding: 10px 0px;\n  display: flex;\n  align-items: center;\n  width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
-}, function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
-}, function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
-});
-var Trigger$1 = styled.select(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  appearance: none;\n  box-shadow: none;\n  outline: none;\n  border: none;\n  color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 2.9em;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 30px 0px 10px;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 2;\n"], ["\n  appearance: none;\n  box-shadow: none;\n  outline: none;\n  border: none;\n  color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 2.9em;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 30px 0px 10px;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
-var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  position: absolute;\n  right: 9px;\n  z-index: 1;\n"], ["\n  position: absolute;\n  right: 9px;\n  z-index: 1;\n"])));
-var Select = function (_a) {
-    var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, style = _a.style, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
-    return (React.createElement(Wrapper$c, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
-        React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
+const Wrapper$b = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Trigger$1 = styled.select `
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: ${Colors.BLACK.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 2.9em;
+  background-color: transparent;
+  background-image: none;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+`;
+const IconWrapper$2 = styled(Icon) `
+  position: absolute;
+  right: 9px;
+  z-index: 1;
+`;
+const Select = (_a) => {
+    var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
+    return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
+        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
             placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
             optionGroups &&
-                optionGroups.map(function (group, i) {
-                    return (React.createElement("optgroup", { key: i, label: group.label || "Group ".concat(i) }, group.options.map(function (option, i) {
+                optionGroups.map((group, i) => {
+                    return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
                         return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
                     })));
                 }),
             options &&
-                options.map(function (option, i) {
+                options.map((option, i) => {
                     return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
                 })),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
-};
-var templateObject_1$h, templateObject_2$f, templateObject_3$c;
-
-var DatePickerWrapper = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: flex;\n  width: ", ";\n"], ["\n  display: flex;\n  width: ", ";\n"])), function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
-});
-var Middle = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  margin: 0px -1px;\n  flex-grow: 1;\n"], ["\n  margin: 0px -1px;\n  flex-grow: 1;\n"])));
-var DatePicker = function (_a) {
-    var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange, style = _a.style;
-    var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
-    var dMinDate = minDate ? dayjs(minDate) : dMaxDate.subtract(100, 'year');
-    var _f = useState(dayjs(date)), dDate = _f[0], setDate = _f[1];
-    var _g = useState(Array.from({ length: dDate.daysInMonth() - 1 }, function (_, i) { return ({
+};
+
+const DatePickerWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Middle = styled.div `
+  margin: 0px -1px;
+  flex-grow: 1;
+`;
+const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
+    const dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
+    const dMinDate = minDate ? dayjs(minDate) : dMaxDate.subtract(100, 'year');
+    const [dDate, setDate] = useState(dayjs(date));
+    const [dayOptions, setDayOptions] = useState(Array.from({ length: dDate.daysInMonth() - 1 }, (_, i) => ({
         value: i + 1,
-    }); })), dayOptions = _g[0], setDayOptions = _g[1];
-    var months = [
+    })));
+    const months = [
         { label: 'January', value: 1 },
         { label: 'Feburary', value: 2 },
         { label: 'March', value: 3 },
@@ -2649,14 +2937,14 @@ var DatePicker = function (_a) {
         { label: 'November', value: 11 },
         { label: 'December', value: 12 },
     ];
-    var years = Array.from({ length: dMaxDate.year() - dMinDate.year() + 1 }, function (_, i) { return ({
+    const years = Array.from({ length: dMaxDate.year() - dMinDate.year() + 1 }, (_, i) => ({
         label: (dMinDate.year() + i).toString(),
         value: dMinDate.year() + i,
-    }); });
-    useEffect(function () {
-        setDayOptions(Array.from({ length: dDate.daysInMonth() }, function (_, i) { return ({
+    }));
+    useEffect(() => {
+        setDayOptions(Array.from({ length: dDate.daysInMonth() }, (_, i) => ({
             value: i + 1,
-        }); }));
+        })));
         // Mimicing browser event structure
         onChange({
             target: {
@@ -2664,19 +2952,19 @@ var DatePicker = function (_a) {
             },
         });
     }, [dDate]);
-    var handleDayChange = function (e) {
-        var date = parseInt(e.target.value, 10);
-        var new_date = dDate.date(date);
+    const handleDayChange = (e) => {
+        const date = parseInt(e.target.value, 10);
+        const new_date = dDate.date(date);
         setDate(new_date);
     };
-    var handleMonthChange = function (e) {
-        var month = parseInt(e.target.value, 10);
-        var new_date = dDate.month(month - 1); // dayjs month is zero based
+    const handleMonthChange = (e) => {
+        const month = parseInt(e.target.value, 10);
+        const new_date = dDate.month(month - 1); // dayjs month is zero based
         setDate(new_date);
     };
-    var handleYearChange = function (e) {
-        var year = parseInt(e.target.value, 10);
-        var new_date = dDate.year(year);
+    const handleYearChange = (e) => {
+        const year = parseInt(e.target.value, 10);
+        const new_date = dDate.year(year);
         setDate(new_date);
     };
     return (React.createElement(React.Fragment, null,
@@ -2685,37 +2973,71 @@ var DatePicker = function (_a) {
             React.createElement(Middle, null,
                 React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
             React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
-};
-var templateObject_1$g, templateObject_2$e;
-
-var Scrim$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  background: ", ";\n"], ["\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  background: ", ";\n"])), function (_a) {
-    var $position = _a.$position;
-    return $position;
-}, function (_a) {
-    var $position = _a.$position;
-    return ($position === 'fixed' ? 9998 : 10);
-}, function (_a) {
-    var $scrim = _a.$scrim;
-    return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
-});
-var Container$2 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  z-index: ", ";\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"], ["\n  z-index: ", ";\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"])), function (_a) {
-    var $position = _a.$position;
-    return ($position === 'fixed' ? 9999 : 11);
-}, function (_a) {
-    var $width = _a.$width;
-    return $width || '400px';
-}, function (_a) {
-    var $position = _a.$position;
-    return $position;
-});
-var Header$2 = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"])));
-var Close$1 = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
-var ContentWrapper$1 = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"])));
-var ButtonBar$1 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"])));
-var Drawer = function (_a) {
-    var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, _b = _a.position, position = _b === void 0 ? 'fixed' : _b, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, _c = _a.scrim, scrim = _c === void 0 ? 'dark' : _c, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
-    useEffect(function () {
-        document.onkeydown = function (e) {
+};
+
+const Scrim$1 = styled.div `
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
+  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
+`;
+const Container$2 = styled.div `
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
+  min-width: 400px;
+  width: ${({ $width }) => $width || '400px'};
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: #fff;
+`;
+const Header$2 = styled.div `
+  padding: 30px 20px;
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: #fff;
+`;
+const Close$1 = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const ContentWrapper$1 = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex: 1;
+  background: #fff;
+`;
+const ButtonBar$1 = styled.div `
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fff;
+`;
+const Drawer = (_a) => {
+    var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
+    useEffect(() => {
+        document.onkeydown = e => {
             if (e.key === 'Escape') {
                 onClose();
             }
@@ -2725,7 +3047,7 @@ var Drawer = function (_a) {
         };
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, __assign({}, accessibleProps, { "$position": position, "$width": width }),
+        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width }),
             React.createElement(Header$2, null,
                 React.createElement("div", null,
                     title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
@@ -2734,16 +3056,25 @@ var Drawer = function (_a) {
                     React.createElement(Button, { format: 'secondary', icon: mdiClose, small: true }))),
             React.createElement(ContentWrapper$1, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
-                tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
-                secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
-                primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
+                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
+                secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
+                primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
-};
-var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
+};
 
-var Wrapper$b = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  height: 16px;\n"], ["\n  display: inline-block;\n  position: relative;\n  height: 16px;\n"])));
-var StyledIcon$2 = styled(Icon)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  width: 16px;\n  height: 16px;\n  padding: 0px 6px;\n  color: ", ";\n  cursor: pointer;\n"], ["\n  width: 16px;\n  height: 16px;\n  padding: 0px 6px;\n  color: ", ";\n  cursor: pointer;\n"])), Colors.PRIMARY.Hex);
-var positions = {
+const Wrapper$a = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$2 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  padding: 0px 6px;
+  color: ${Colors.PRIMARY.Hex};
+  cursor: pointer;
+`;
+const positions = {
     'right-top': {
         top: '0px',
         left: '28px',
@@ -2771,177 +3102,357 @@ var positions = {
         transform: 'translateY(-50%)',
     },
 };
-var Content$1 = styled.div(function (props) { return (__assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: Colors.PRIMARY.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])); });
-var Tooltip = function (_a) {
-    var children = _a.children, _b = _a.position, position = _b === void 0 ? 'right-top' : _b, _c = _a.width, width = _c === void 0 ? '240px' : _c;
-    var _d = useState(false), show_content = _d[0], toggleContent = _d[1];
-    return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+const Content$2 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: Colors.PRIMARY.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])));
+const Tooltip = ({ children, position = 'right-top', width = '240px' }) => {
+    const [show_content, toggleContent] = useState(false);
+    return (React.createElement(Wrapper$a, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         React.createElement(StyledIcon$2, { path: mdiInformationOutline }),
-        show_content ? (React.createElement(Content$1, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
-};
-var templateObject_1$e, templateObject_2$c;
-
-var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
-var LabelRow = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 0 4px 0;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 0 4px 0;\n  box-sizing: border-box;\n"])));
-var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 500;\n  line-height: 1em;\n  font-family: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  font-size: ", ";\n  font-weight: 500;\n  line-height: 1em;\n  font-family: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
-var Required = styled.span(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  color: ", ";\n  margin-left: 4px;\n"], ["\n  color: ", ";\n  margin-left: 4px;\n"])), Colors.RED.Hex);
-var Action = styled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 500;\n  line-height: 1em;\n  font-family: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  font-weight: 500;\n  line-height: 1em;\n  font-family: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
-var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.3em;\n  font-family: ", ";\n  color: ", ";\n  margin: 0 0 8px 0;\n  box-sizing: border-box;\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.3em;\n  font-family: ", ";\n  color: ", ";\n  margin: 0 0 8px 0;\n  box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.BLACK.Hex);
-var Validation = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.3em;\n  font-family: ", ";\n  color: ", ";\n  margin: 4px 0 0 0;\n  box-sizing: border-box;\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.3em;\n  font-family: ", ";\n  color: ", ";\n  margin: 4px 0 0 0;\n  box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
-var Field = function (_a) {
-    var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, tooltip = _a.tooltip, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
-    return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
+        show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
+};
+
+const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
+const LabelRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 4px 0;
+  box-sizing: border-box;
+`;
+const Label$2 = styled.label `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  display: flex;
+  align-items: center;
+`;
+const Required = styled.span `
+  color: ${Colors.RED.Hex};
+  margin-left: 4px;
+`;
+const Action = styled.span `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.PRIMARY.Hex};
+  cursor: pointer;
+`;
+const Description = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  margin: 0 0 8px 0;
+  box-sizing: border-box;
+`;
+const Validation = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.RED.Hex};
+  margin: 4px 0 0 0;
+  box-sizing: border-box;
+`;
+const Field = (_a) => {
+    var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
+    return (React.createElement(Wrapper$9, Object.assign({ style: style }, accessibleProps),
         React.createElement(LabelRow, null,
             React.createElement(Label$2, { htmlFor: htmlFor },
                 label,
                 required ? React.createElement(Required, null, "*") : null,
-                tooltip ? React.createElement(Tooltip, __assign({}, tooltip)) : null),
+                tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
             action ? React.createElement(Action, { onClick: action.onClick }, action.label) : null),
         description ? React.createElement(Description, null, description) : null,
         children,
         validationText ? React.createElement(Validation, null, validationText) : null));
-};
-var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
-
-var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  padding: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  border: 1px dashed ", ";\n  background-color: ", ";\n"], ["\n  display: flex;\n  gap: 16px;\n  padding: 20px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  border: 1px dashed ", ";\n  background-color: ", ";\n"])), function (_a) {
-    var $isDragOver = _a.$isDragOver;
-    return ($isDragOver ? "".concat(Colors.PRIMARY.Hex) : '#ccc');
-}, function (_a) {
-    var $isDragOver = _a.$isDragOver;
-    return $isDragOver ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.05)") : '#ffffff';
-});
-var StyledIcon$1 = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  width: 80px;\n  height: 80px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background-color: ", ";\n  border-radius: 80px;\n  display: flex;\n  margin: auto;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 80px;\n  height: 80px;\n  cursor: pointer;\n  flex-shrink: 0;\n  background-color: ", ";\n  border-radius: 80px;\n  display: flex;\n  margin: auto;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var $isDragOver = _a.$isDragOver;
-    return ($isDragOver ? '#fff' : '#f5f5f5');
-});
-var Files = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n"])));
-var File = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  width: 300px;\n  padding: 10px;\n  align-items: center;\n  gap: 2px;\n  list-style-type: none;\n  border-radius: 4px;\n  border: 1px solid #ccc;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  width: 300px;\n  padding: 10px;\n  align-items: center;\n  gap: 2px;\n  list-style-type: none;\n  border-radius: 4px;\n  border: 1px solid #ccc;\n"])));
-var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  padding: ", ";\n  margin-top: ", ";\n"], ["\n  padding: ", ";\n  margin-top: ", ";\n"])), function (_a) {
-    var $fileState = _a.$fileState;
-    return ($fileState ? '20px 0px' : '');
-}, function (_a) {
-    var $fileState = _a.$fileState;
-    return ($fileState ? '' : '16px');
-});
-var IconWrapper$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var ProgressBar = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  width: 100px;\n  height: 14px;\n  border-radius: 4px;\n  background: #f5f5f5;\n  overflow-x: hidden;\n"], ["\n  width: 100px;\n  height: 14px;\n  border-radius: 4px;\n  background: #f5f5f5;\n  overflow-x: hidden;\n"])));
-var Progress = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"], ["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"])), function (_a) {
-    var $width = _a.$width;
-    return "".concat($width, "%");
-}, Colors.GREEN.Hex);
-var FileUpload = function (_a) {
-    var acceptFiles = _a.acceptFiles, onChange = _a.onChange, onFileDelete = _a.onFileDelete, _b = _a.maxFileSize, maxFileSize = _b === void 0 ? 10 : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.progress, progress = _d === void 0 ? false : _d, UploadProgress = _a.UploadProgress, accessibleProps = __rest(_a, ["acceptFiles", "onChange", "onFileDelete", "maxFileSize", "multiple", "progress", "UploadProgress"]);
-    var MAX_FILE_SIZE = maxFileSize * 1024 * 1024;
-    var _e = useState([]), files = _e[0], setFiles = _e[1];
-    var _f = useState(false), dragOver = _f[0], setDragOver = _f[1];
-    var inputField = useRef(null);
-    useEffect(function () {
-        if (UploadProgress) {
-            var updatedFiles = files.map(function (file, index) {
-                if (index === UploadProgress.index) {
-                    return __assign(__assign({}, file), { uploadUpdate: UploadProgress.progress });
-                }
-                else {
-                    return file;
+};
+
+const Dropzone = styled.div `
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
+  background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
+  cursor: copy;
+`;
+const IconWrapper$1 = styled.div `
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledIcon$1 = styled(Icon) `
+  width: 40px !important;
+  height: 40px !important;
+
+  > path {
+    fill: ${Colors.GRAY.Hex} !important;
+  }
+`;
+const ClickZone = styled.div `
+  margin: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;
+const Content$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+`;
+const Files = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 10px;
+  margin: 20px;
+`;
+const File = styled.div `
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+`;
+const Remove$1 = styled(Icon) `
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  > path {
+    fill: ${Colors.RED.Hex} !important;
+  }
+`;
+const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
+    const inputRef = useRef(null);
+    const [files, setFiles] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    const [allowMoreFiles, setAllowMoreFiles] = useState(true);
+    const handleDrag = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === 'dragenter' || e.type === 'dragover') {
+            setDragging(true);
+        }
+        else if (e.type === 'dragleave') {
+            setDragging(false);
+        }
+    };
+    const handleDrop = (e) => {
+        var _a, _b;
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(true);
+        if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) {
+            const newFiles = [];
+            [...e.dataTransfer.items].forEach(file => {
+                if (file.kind === 'file') {
+                    const f = file.getAsFile();
+                    if (f) {
+                        newFiles.push(f);
+                    }
                 }
             });
-            setFiles(updatedFiles);
+            addFiles(newFiles);
         }
-    }, [UploadProgress]);
-    useEffect(function () {
-        onChange(files);
-    }, [files]);
-    var assignFiles = function (newFiles) {
-        var _loop_1 = function (i) {
-            if (newFiles[i].size < MAX_FILE_SIZE) {
-                setFiles(function (files) { return __spreadArray(__spreadArray([], files, true), [{ file: newFiles[i], uploadProgress: 0 }], false); });
-            }
-        };
-        for (var i = 0; i < newFiles.length; i++) {
-            _loop_1(i);
+        else if ((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files) {
+            addFiles([...e.dataTransfer.files]);
         }
+        setDragging(false);
     };
-    var onFileSelect = function (e) {
-        assignFiles(Array.from(e.target.files || []));
-    };
-    var handleDrop = function (e) {
-        e === null || e === void 0 ? void 0 : e.preventDefault();
-        assignFiles(Array.from(e.dataTransfer.files || []));
+    const handleChange = (e) => {
+        const input = e.target;
+        if (input.files) {
+            addFiles([...input.files]);
+        }
     };
-    var handleDragOver = function (e) {
-        e === null || e === void 0 ? void 0 : e.preventDefault();
-        setDragOver(true);
+    const addFiles = (addedFiles) => {
+        const newFiles = [];
+        const errors = [];
+        addedFiles.forEach(file => {
+            let valid = true;
+            if (accept) {
+                if (!accept.includes(file.type)) {
+                    valid = false;
+                    errors.push({
+                        file,
+                        message: 'File type is not permitted.',
+                    });
+                }
+            }
+            if (file.size > maxSize * 1000000 || files.length + newFiles.length === maxFiles) {
+                valid = false;
+                errors.push({
+                    file,
+                    message: 'File size exceeds limit.',
+                });
+            }
+            if (validateFile && !validateFile(file)) {
+                valid = false;
+            }
+            if (valid) {
+                newFiles.push(file);
+            }
+        });
+        if (errors.length && onError) {
+            onError(errors);
+        }
+        setFiles([...files, ...newFiles]);
     };
-    var handleDragLeave = function (e) {
-        e === null || e === void 0 ? void 0 : e.preventDefault();
-        setDragOver(false);
+    const triggerFileExplorer = () => {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
     };
-    var removeItem = function (index) {
-        var newArray = __spreadArray([], files, true);
-        newArray.splice(index, 1);
-        setFiles(newArray);
-        onFileDelete(files[index]);
+    const handleRemove = (file) => {
+        setFiles(files.filter(f => f !== file));
     };
+    useEffect(() => {
+        if (onChange) {
+            onChange(files);
+        }
+        if (files.length < maxFiles) {
+            setAllowMoreFiles(true);
+        }
+        else {
+            setAllowMoreFiles(false);
+        }
+    }, [files]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Wrapper$9, __assign({ "$isDragOver": dragOver, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, accessibleProps),
-            files.length > 0 && (React.createElement(Files, null, Array.from(files).map(function (singleFile, index) {
-                var _a;
-                return (React.createElement(File, { key: index },
-                    React.createElement(Copy, { children: (_a = singleFile.file) === null || _a === void 0 ? void 0 : _a.name, type: 'bold' }),
-                    singleFile.uploadUpdate === 100 || !progress ? (React.createElement(IconWrapper$1, { onClick: function () { return removeItem(index); } },
-                        React.createElement(Icon, { color: 'red', path: mdiMinusCircle, size: 1 }))) : (React.createElement(ProgressBar, null,
-                        React.createElement(Progress, { "$width": (singleFile === null || singleFile === void 0 ? void 0 : singleFile.uploadUpdate) || 0, role: 'progressbar' })))));
-            }))),
-            React.createElement("div", { onClick: function () { var _a; return (_a = inputField === null || inputField === void 0 ? void 0 : inputField.current) === null || _a === void 0 ? void 0 : _a.click(); } },
-                !(files.length > 0) && (React.createElement(StyledIcon$1, { "$isDragOver": dragOver },
-                    React.createElement(Icon, { color: dragOver ? "".concat(Colors.PRIMARY.Hex) : "".concat(Colors.GRAY.Hex), path: mdiFolderPlusOutline, size: 1.667 }))),
-                React.createElement("input", { accept: acceptFiles, hidden: true, multiple: multiple, onChange: onFileSelect, ref: inputField, type: 'file' }),
-                React.createElement(CopyWrapper, { "$fileState": files.length > 0 },
-                    React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
-                    React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
-};
-var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1;
+        React.createElement("input", { accept: accept, multiple: true, onChange: allowMoreFiles ? handleChange : undefined, ref: inputRef, style: { display: 'none' }, type: 'file' }),
+        React.createElement(Dropzone, { "$dragging": dragging, onDragEnter: allowMoreFiles ? handleDrag : undefined, onDragLeave: allowMoreFiles ? handleDrag : undefined, onDragOver: allowMoreFiles ? handleDrag : undefined, onDrop: allowMoreFiles ? handleDrop : undefined },
+            files.length ? (React.createElement(Files, null, files.map(file => {
+                return (React.createElement(File, { key: file.name },
+                    React.createElement(Copy, { type: 'bold' }, file.name),
+                    React.createElement(Remove$1, { onClick: handleRemove.bind(null, file), path: mdiMinusCircle })));
+            }))) : null,
+            allowMoreFiles ? (React.createElement(ClickZone, { onClick: triggerFileExplorer },
+                files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging },
+                    React.createElement(StyledIcon$1, { path: mdiFolderPlusOutline }))),
+                React.createElement(Content$1, null,
+                    React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
+                    message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
+};
 
-var formatAsPhone = function (number) {
-    var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
-    var size = formatted_value.length;
+const formatAsPhone = (number) => {
+    let formatted_value = `${number}`.replace(/[^0-9.]/g, '');
+    const size = formatted_value.length;
     if (size < 1) ;
     else if (size < 4) {
-        formatted_value = "(".concat(formatted_value);
+        formatted_value = `(${formatted_value}`;
     }
     else if (size < 7) {
-        formatted_value = "(".concat(formatted_value.substring(0, 3), ") ").concat(formatted_value.substring(3, 6));
+        formatted_value = `(${formatted_value.substring(0, 3)}) ${formatted_value.substring(3, 6)}`;
     }
     else {
-        formatted_value = "(".concat(formatted_value.substring(0, 3), ") ").concat(formatted_value.substring(3, 6), "-").concat(formatted_value.substring(6, 10));
+        formatted_value = `(${formatted_value.substring(0, 3)}) ${formatted_value.substring(3, 6)}-${formatted_value.substring(6, 10)}`;
     }
     return formatted_value;
 };
-var formatAsSsn = function (number) {
-    var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
-    var size = formatted_value.length;
+const formatAsSsn = (number) => {
+    let formatted_value = `${number}`.replace(/[^0-9.]/g, '');
+    const size = formatted_value.length;
     if (size > 3 && size < 6) {
-        formatted_value = "".concat(formatted_value.substring(0, 3), "-").concat(formatted_value.substring(3, 5));
+        formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}`;
     }
     else if (size > 5) {
-        formatted_value = "".concat(formatted_value.substring(0, 3), "-").concat(formatted_value.substring(3, 5), "-").concat(formatted_value.substring(5, 9));
+        formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
 };
 
-var StyledInput = styled.input(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1.28em;\n  color: ", ";\n  position: relative;\n  height: auto;\n  padding: 10px;\n  opacity: ", ";\n  box-shadow: none;\n  outline: none;\n  margin: 0px;\n  text-indent: 0px;\n  --webkit-appearance: none;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  &:focus {\n    border-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1.28em;\n  color: ", ";\n  position: relative;\n  height: auto;\n  padding: 10px;\n  opacity: ", ";\n  box-shadow: none;\n  outline: none;\n  margin: 0px;\n  text-indent: 0px;\n  --webkit-appearance: none;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$suffix ? '4px 0px 0px 4px' : '4px'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
-var StyledSuffix = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  height: auto;\n  background: #f5f5f5;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-color: #cccccc;\n  border-radius: 0px 4px 4px 0px;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: 400;\n  font-size: ", ";\n  color: Colors.BLACK.Hex;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  height: auto;\n  background: #f5f5f5;\n  border-width: 1px 1px 1px 0px;\n  border-style: solid;\n  border-color: #cccccc;\n  border-radius: 0px 4px 4px 0px;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: 400;\n  font-size: ", ";\n  color: Colors.BLACK.Hex;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT);
-var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  width: ", ";\n"], ["\n  display: flex;\n  width: ", ";\n"])), function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
-});
-var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1.6em;\n  color: ", ";\n  position: relative;\n  height: ", ";\n  padding: 10px;\n  opacity: ", ";\n  box-shadow: none;\n  outline: none;\n  padding: 10px,\n  margin: 0px,\n  text-indent: 0px,\n  --webkit-appearance: none;\n  box-sizing: border-box;\n  display: block;\n  width: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1.6em;\n  color: ", ";\n  position: relative;\n  height: ", ";\n  padding: 10px;\n  opacity: ", ";\n  box-shadow: none;\n  outline: none;\n  padding: 10px,\n  margin: 0px,\n  text-indent: 0px,\n  --webkit-appearance: none;\n  box-sizing: border-box;\n  display: block;\n  width: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
-}, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
-var Input$1 = function (_a) {
-    var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, style = _a.style, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "style", "type", "value"]);
-    var handleInputChange = function (e) {
+const StyledInput = styled.input `
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  border-radius: ${props => (props.$suffix ? '4px 0px 0px 4px' : '4px')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.28em;
+  color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
+  position: relative;
+  height: auto;
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  &:focus {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex)};
+  }
+`;
+const StyledSuffix = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  height: auto;
+  background: #f5f5f5;
+  border-width: 1px 1px 1px 0px;
+  border-style: solid;
+  border-color: #cccccc;
+  border-radius: 0px 4px 4px 0px;
+  font-family: ${FontStyles.DEFAULT};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${FontSizes.DEFAULT};
+  color: Colors.BLACK.Hex;
+`;
+const StyledWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const StyledTextarea = styled.textarea `
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.6em;
+  color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex)};
+  position: relative;
+  height: ${props => props.$height || '40px'};
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  padding: 10px,
+  margin: 0px,
+  text-indent: 0px,
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  &:focus {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex)};
+  }
+`;
+const Input$1 = (_a) => {
+    var { format, suffix, height, invalid, max, maxLength, min, onBlur, onChange, onKeyDown, placeholder, readOnly, step, style, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "style", "type", "value"]);
+    const handleInputChange = (e) => {
         if (format === 'currency' || format === 'currency_decimal') {
             e.target.value = e.target.value.replace(/[^0-9.]/g, '');
         }
@@ -2955,44 +3466,55 @@ var Input$1 = function (_a) {
             e.target.value = e.target.value.toLowerCase();
         }
         if (type === 'number' && max && parseInt(e.target.value, 10) > parseInt(max, 10)) {
-            e.target.value = "".concat(max);
+            e.target.value = `${max}`;
         }
         if (!readOnly && onChange)
             onChange(e);
     };
-    var handleTextareaChange = function (e) {
+    const handleTextareaChange = (e) => {
         if (!readOnly && onChange)
             onChange(e);
     };
-    var formatted_value = value;
+    let formatted_value = value;
     if (format === 'phone') {
         formatted_value = formatAsPhone(value);
     }
     if (format === 'currency') {
-        if ("".concat(value).length) {
+        if (`${value}`.length) {
             formatted_value = Numeral(value).format('$0,0');
         }
     }
     if (format === 'currency_decimal') {
-        formatted_value = "$".concat(formatted_value);
+        formatted_value = `$${formatted_value}`;
     }
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(value);
     }
-    return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$style": style },
-        React.createElement(StyledInput, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
+    return type === 'textarea' ? (React.createElement(StyledTextarea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$style": style },
+        React.createElement(StyledInput, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
         suffix && React.createElement(StyledSuffix, null, suffix)));
-};
-var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$4;
+};
 
-var Wrapper$8 = styled.a(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: 500;\n  font-style: normal;\n  text-decoration: 'none';\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: 0px;\n  padding: 0px;\n  box-sizing: border-box;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: 500;\n  font-style: normal;\n  text-decoration: 'none';\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: 0px;\n  padding: 0px;\n  box-sizing: border-box;\n  cursor: pointer;\n"])), Colors.PRIMARY.Hex, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$small ? '1.5em' : '1.6em'); }, function (props) { return (props.$small ? '1px' : '0px'); });
-var Link = function (_a) {
-    var children = _a.children, onClick = _a.onClick, small = _a.small, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
-    return (React.createElement(Wrapper$8, __assign({ "$small": small, onClick: onClick }, accessibleProps), children));
-};
-var templateObject_1$a;
+const Wrapper$8 = styled.a `
+  color: ${Colors.PRIMARY.Hex};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$small ? '1px' : '0px')};
+  font-weight: 500;
+  font-style: normal;
+  text-decoration: 'none';
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  cursor: pointer;
+`;
+const Link = (_a) => {
+    var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
+    return (React.createElement(Wrapper$8, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
+};
 
-var colorMapping = {
+const colorMapping = {
     black: {
         fill_1: '#000000',
         fill_2: '#000000',
@@ -3014,15 +3536,15 @@ var colorMapping = {
         fill_3: '#E82425',
     },
 };
-var Logo = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'standard_full' : _b, _c = _a.height, height = _c === void 0 ? '50px' : _c, accessibleProps = __rest(_a, ["type", "height"]);
-    var type_parts = type.split('_');
+const Logo = (_a) => {
+    var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
+    const type_parts = type.split('_');
     switch (type_parts[0]) {
         case 'mark':
-            return (React.createElement("svg", __assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
                 React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1] })));
         default:
-            return (React.createElement("svg", __assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
                 React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3 }),
                 React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1 }),
                 React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1 }),
@@ -3034,21 +3556,111 @@ var Logo = function (_a) {
     }
 };
 
-var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var Container$1 = styled.dialog(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  max-width: ", ";\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 0px;\n  box-sizing: border-box;\n"], ["\n  max-width: ", ";\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 0px;\n  box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
-var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
-var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
-var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
-var Steps = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  background: #f5f5f5;\n  display: flex;\n  gap: 30px;\n  align-items: center;\n"], ["\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  background: #f5f5f5;\n  display: flex;\n  gap: 30px;\n  align-items: center;\n"])));
-var Step = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
-var StepIndicator = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  background: ", ";\n  color: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"], ["\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  background: ", ";\n  color: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"])), function (props) { return (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex); }, function (props) { return (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex); });
-var StepLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: #000;\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n"], ["\n  color: #000;\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n"])));
-var ContentWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
-var ButtonBar = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
-var Modal = function (_a) {
-    var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, steps = _a.steps, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
-    useEffect(function () {
-        document.onkeydown = function (e) {
+const Wrapper$7 = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Container$1 = styled.dialog `
+  max-width: ${props => props.$maxWidth || '90vw'};
+  width: auto;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: relative;
+  padding: 0px;
+  box-sizing: border-box;
+`;
+const Header$1 = styled.div `
+  position: sticky;
+  top: 0;
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  box-sizing: border-box;
+`;
+const Close = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const CloseMsg = styled.span `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.MEDIUM_GRAY.Hex};
+`;
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+const ContentWrapper = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #ffffff;
+  max-height: calc(100vh - 260px);
+  box-sizing: border-box;
+`;
+const ButtonBar = styled.div `
+  position: sticky;
+  bottom: 0;
+  background: #ffffff;
+  padding: 20px;
+  border-top: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  box-sizing: border-box;
+`;
+const Modal = (_a) => {
+    var { children, title, onClose, maxWidth, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    useEffect(() => {
+        document.onkeydown = e => {
             if (e.key === 'Escape') {
                 onClose();
             }
@@ -3058,49 +3670,44 @@ var Modal = function (_a) {
         };
     }, []);
     return (React.createElement(Wrapper$7, null,
-        React.createElement(Container$1, __assign({ "$maxWidth": maxWidth, open: true }, accessibleProps),
+        React.createElement(Container$1, Object.assign({ "$maxWidth": maxWidth, open: true }, accessibleProps),
             React.createElement(Header$1, null,
                 title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
                 React.createElement(Close, { onClick: onClose },
                     React.createElement(CloseMsg, null, "(Esc)"),
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
-            steps ? (React.createElement(Steps, null, steps.map(function (step, i) {
+            steps ? (React.createElement(Steps, null, steps.map((step, i) => {
                 return (React.createElement(Step, { key: i },
                     step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
                     React.createElement(StepLabel, null, step.label)));
             }))) : null,
             React.createElement(ContentWrapper, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
-                tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
+                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 primaryButton || secondaryButton ? (React.createElement("div", { style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
-                    primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
-};
-var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
-
-var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: ", ";\n  padding: 10px;\n  width: 200px;\n"], ["\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: ", ";\n  padding: 10px;\n  width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
-var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  display: flex;\n  gap: 8px;\n  height: 38px;\n  padding: 8px;\n  &:hover {\n    background: rgba(1, 147, 215, 0.1);\n    cursor: pointer;\n\n    svg,\n    path {\n      fill: ", " !important;\n    }\n  }\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  display: flex;\n  gap: 8px;\n  height: 38px;\n  padding: 8px;\n  &:hover {\n    background: rgba(1, 147, 215, 0.1);\n    cursor: pointer;\n\n    svg,\n    path {\n      fill: ", " !important;\n    }\n  }\n"])), Colors.PRIMARY.Hex);
-var Title = styled.span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  font-family: Roboto;\n  font-size: 14px;\n  font-weight: 400;\n  height: auto;\n  letter-spacing: 0px;\n  line-height: 22px;\n  text-align: left;\n"], ["\n  font-family: Roboto;\n  font-size: 14px;\n  font-weight: 400;\n  height: auto;\n  letter-spacing: 0px;\n  line-height: 22px;\n  text-align: left;\n"])));
-var MoreMenu = function (_a) {
-    var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$6, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
-        return (React.createElement(MenuItem, { onClick: item.onClick },
-            item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
-            React.createElement(Title, null, item.label)));
-    })));
-};
-var templateObject_1$8, templateObject_2$7, templateObject_3$6;
+                    secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
+                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
+};
 
-var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  position: relative;\n  width: ", ";\n"], ["\n  position: relative;\n  width: ", ";\n"])), function (_a) {
-    var $style = _a.$style;
-    return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
-});
-var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: ", ";\n  height: 40px;\n  padding: 0 10px;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  background-image: none;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  z-index: 1;\n"], ["\n  box-sizing: border-box;\n  border-radius: ", ";\n  height: 40px;\n  padding: 0 10px;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  background-image: none;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
+const Wrapper$6 = styled.div `
+  position: relative;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Trigger = styled.div `
+  box-sizing: border-box;
+  border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
+  height: 40px;
+  padding: 0 10px;
+  position: relative;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => {
     if (props.$invalid) {
         return Colors.RED.Hex;
     }
@@ -3110,156 +3717,408 @@ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTempl
     else {
         return '#cccccc';
     }
-}, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
-var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
-var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  background: #fff;\n  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"], ["\n  background: #fff;\n  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"])), Colors.PRIMARY.Hex);
-var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"])));
-var MultiSelect = function (_a) {
-    var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, style = _a.style, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
-    var _e = useState(false), showOptions = _e[0], setShowOptions = _e[1];
-    var selected_options = options.filter(function (o) { return selected.includes(o.value); });
-    return (React.createElement(Wrapper$5, { "$style": style },
-        React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
+}};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  background-image: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+`;
+const Value = styled.div `
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+const Options = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${Colors.PRIMARY.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  max-height: 220px;
+  overflow: auto;
+`;
+const Scrim = styled.div `
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9;
+`;
+const MultiSelect = (_a) => {
+    var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
+    const [showOptions, setShowOptions] = useState(false);
+    const selected_options = options.filter(o => selected.includes(o.value));
+    return (React.createElement(Wrapper$6, { "$style": style },
+        React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
             React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
-                ? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
-                : "".concat(selected_options.length, " Selected")),
+                ? selected_options.map(o => o.label || o.value).join(', ')
+                : `${selected_options.length} Selected`),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: showOptions ? mdiChevronUp : mdiChevronDown, size: '22px' })),
         showOptions ? (React.createElement(Options, null,
             React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
-};
-var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$1;
-
-var Wrapper$4 = styled.nav(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"])));
-var Pagination = function (_a) {
-    var _b = _a.currentPage, currentPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, _c = _a.pageCount, pageCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
-    var is_first_page = currentPage === 1;
-    var is_last_page = currentPage === pageCount;
-    var handlePrevClick = function () {
+};
+
+const Wrapper$5 = styled.div `
+  display: flex;
+  padding: 16px 30px;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+`;
+const Info = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+`;
+const Breadcrumbs = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Actions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
+    const { menuItems = [], label = '', } = buttonMenu || {};
+    return (React.createElement(Wrapper$5, null,
+        React.createElement(Info, null,
+            React.createElement(Heading, { type: 'secondary' }, title),
+            breadcrumbs ? (React.createElement(Breadcrumbs, null, breadcrumbs.map((crumb, i) => {
+                return (React.createElement(React.Fragment, null,
+                    crumb.onClick ? (React.createElement(Link, { onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { type: 'small' }, crumb.label)),
+                    i + 1 < breadcrumbs.length ? React.createElement(Icon$1, { path: mdiChevronRight, size: '14px' }) : null));
+            }))) : null),
+        actions ? (React.createElement(Actions, null,
+            actions.map(action => {
+                const { label } = action, buttonProps = __rest(action, ["label"]);
+                return (React.createElement(Button, Object.assign({}, buttonProps, { small: true }), label));
+            }),
+            menuItems.length ? (React.createElement(ButtonMenu, { label: label, menuItems: menuItems, small: true })) : null)) : null));
+};
+
+const Wrapper$4 = styled.nav `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+`;
+const Pagination = (_a) => {
+    var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
+    const is_first_page = currentPage === 1;
+    const is_last_page = currentPage === pageCount;
+    const handlePrevClick = () => {
         if (!is_first_page) {
             onClick(currentPage - 1);
         }
     };
-    var handleNextClick = function () {
+    const handleNextClick = () => {
         if (!is_last_page) {
             onClick(currentPage + 1);
         }
     };
-    var handlePageChange = function (e) {
-        var new_page = parseInt(e.target.value, 10);
+    const handlePageChange = (e) => {
+        const new_page = parseInt(e.target.value, 10);
         if (new_page !== currentPage) {
             onClick(new_page);
         }
     };
-    return (React.createElement(Wrapper$4, __assign({}, accessibleProps),
+    return (React.createElement(Wrapper$4, Object.assign({}, accessibleProps),
         React.createElement(Button, { disabled: is_first_page, icon: mdiChevronLeft, onClick: handlePrevClick, small: true }),
-        React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), function (p) { return p + 1; }).map(function (p) { return ({
-                label: "Page ".concat(p),
-                value: "".concat(p),
-            }); }), value: "".concat(currentPage) }),
+        React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
+                label: `Page ${p}`,
+                value: `${p}`,
+            })), value: `${currentPage}` }),
         React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
-};
-var templateObject_1$6;
-
-var Wrapper$3 = styled.label(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  line-height: 1.6rm;\n  box-sizing: border-box;\n"], ["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  line-height: 1.6rm;\n  box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
-var Input = styled.input(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  font-size: 20px;\n  margin: 0px 0px 2px 0px;\n  line-height: 1.1em;\n"], ["\n  font-size: 20px;\n  margin: 0px 0px 2px 0px;\n  line-height: 1.1em;\n"])));
-var Label$1 = styled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  margin-left: 6px;\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  color: ", ";\n  line-height: 1.6em;\n  margin-left: 6px;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
-var Radio = function (_a) {
-    var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, value = _a.value, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
-    return (React.createElement(Wrapper$3, __assign({ "$disabled": disabled }, accessibleProps),
+};
+
+const Wrapper$3 = styled.label `
+  padding: 4px 0;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6rm;
+  box-sizing: border-box;
+`;
+const Input = styled.input `
+  font-size: 20px;
+  margin: 0px 0px 2px 0px;
+  line-height: 1.1em;
+`;
+const Label$1 = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  margin-left: 6px;
+`;
+const Radio = (_a) => {
+    var { children, disabled, checked, onChange, value } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
+    return (React.createElement(Wrapper$3, Object.assign({ "$disabled": disabled }, accessibleProps),
         React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
         React.createElement(Label$1, null, children)));
-};
-var templateObject_1$5, templateObject_2$5, templateObject_3$4;
+};
 
-var RadioList = function (_a) {
-    var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, value = _a.value, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
-    return (React.createElement(React.Fragment, null, options.map(function (option) {
-        var label = option.label || option.value;
-        return (React.createElement(Radio, __assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
+const RadioList = (_a) => {
+    var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
+    return (React.createElement(React.Fragment, null, options.map((option) => {
+        const label = option.label || option.value;
+        return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
     })));
 };
 
-var StyledTable = styled.table(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 1px;\n  table-layout: ", ";\n  border-collapse: collapse;\n  text-indent: 0px;\n  border-spacing: 0px;\n  border-color: none;\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  margin-top: 1px;\n  table-layout: ", ";\n  border-collapse: collapse;\n  text-indent: 0px;\n  border-spacing: 0px;\n  border-color: none;\n  box-sizing: border-box;\n"])), function (props) { return props.$tableLayout || 'auto'; });
-var Header = styled.th(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  padding: 12px !important;\n  text-align: left;\n  font-weight: 500;\n  border-bottom: 1px solid #e5e5e5;\n  border-top: 1px solid #e5e5e5;\n  text-transform: uppercase;\n  font-size: 12px;\n  font-family: ", ";\n  letter-spacing: 1px;\n  white-space: nowrap;\n  line-height: 1;\n  position: relative;\n  box-sizing: border-box;\n  width: ", ";\n  cursor: ", ";\n  color: ", ";\n"], ["\n  padding: 12px !important;\n  text-align: left;\n  font-weight: 500;\n  border-bottom: 1px solid #e5e5e5;\n  border-top: 1px solid #e5e5e5;\n  text-transform: uppercase;\n  font-size: 12px;\n  font-family: ", ";\n  letter-spacing: 1px;\n  white-space: nowrap;\n  line-height: 1;\n  position: relative;\n  box-sizing: border-box;\n  width: ", ";\n  cursor: ", ";\n  color: ", ";\n"])), FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; }, function (props) { return (props.$isSortable ? 'pointer' : 'default'); }, function (props) { return (props.$isSortable ? Colors.PRIMARY.Hex : Colors.BLACK.Hex); });
-var Row = styled.tr(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  cursor: ", ";\n  transition: all 0.2s;\n  background-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  cursor: ", ";\n  transition: all 0.2s;\n  background-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$isClickable ? 'pointer' : 'default'); }, function (props) { return props.$bgColor; }, function (props) {
-    return props.$isClickable ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.1)") : props.$bgColor;
-});
-var Column = styled.td(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  padding: 16px 12px !important;\n  font-size: ", " !important;\n  font-weight: 400 !important;\n  font-family: ", ";\n  border: none !important;\n  word-break: break-word;\n  line-height: 1.4em;\n  box-sizing: border-box;\n  width: ", ";\n"], ["\n  padding: 16px 12px !important;\n  font-size: ", " !important;\n  font-weight: 400 !important;\n  font-family: ", ";\n  border: none !important;\n  word-break: break-word;\n  line-height: 1.4em;\n  box-sizing: border-box;\n  width: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; });
-var IconWrapper = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 2px;\n"], ["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 2px;\n"])));
-var Table = function (_a) {
-    var _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.data, data = _c === void 0 ? [] : _c, sortBy = _a.sortBy, sortDirection = _a.sortDirection, hideHeaders = _a.hideHeaders, onRowClick = _a.onRowClick, onSortChange = _a.onSortChange, tableLayout = _a.tableLayout, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout"]);
-    return (React.createElement(StyledTable, __assign({ "$tableLayout": tableLayout }, accessibleProps),
+const StyledTable = styled.table `
+  width: 100%;
+  margin-top: 1px;
+  table-layout: ${props => props.$tableLayout || 'auto'};
+  border-collapse: collapse;
+  text-indent: 0px;
+  border-spacing: 0px;
+  border-color: none;
+  box-sizing: border-box;
+`;
+const Header = styled.th `
+  padding: 12px !important;
+  text-align: left;
+  font-weight: 500;
+  border-bottom: 1px solid #e5e5e5;
+  border-top: 1px solid #e5e5e5;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: 1px;
+  white-space: nowrap;
+  line-height: 1;
+  position: relative;
+  box-sizing: border-box;
+  width: ${props => props.$width || 'auto'};
+  cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
+  color: ${props => (props.$isSortable ? Colors.PRIMARY.Hex : Colors.BLACK.Hex)};
+`;
+const Row = styled.tr `
+  cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
+  transition: all 0.2s;
+  background-color: ${props => props.$bgColor};
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${props => props.$isClickable ? `rgba(${Colors.PRIMARY.Rgb}, 0.1)` : props.$bgColor};
+  }
+`;
+const Column = styled.td `
+  padding: 16px 12px !important;
+  font-size: ${FontSizes.DEFAULT} !important;
+  font-weight: 400 !important;
+  font-family: ${FontStyles.DEFAULT};
+  border: none !important;
+  word-break: break-word;
+  line-height: 1.4em;
+  box-sizing: border-box;
+  width: ${props => props.$width || 'auto'};
+`;
+const IconWrapper = styled.span `
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 2px;
+`;
+const Table = (_a) => {
+    var { columns = [], data = [], sortBy, sortDirection, hideHeaders, onRowClick, onSortChange, tableLayout } = _a, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout"]);
+    return (React.createElement(StyledTable, Object.assign({ "$tableLayout": tableLayout }, accessibleProps),
         hideHeaders ? null : (React.createElement("thead", null,
-            React.createElement("tr", null, columns.map(function (column, i) {
+            React.createElement("tr", null, columns.map((column, i) => {
                 return (React.createElement(Header, { "$isSortable": column.isSortable, "$width": column.width, key: i, onClick: onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange.bind(null, column.id) },
                     column.label,
                     column.isSortable && sortBy === column.id ? (React.createElement(IconWrapper, null,
                         React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: sortDirection === 'asc' ? mdiChevronUp : mdiChevronDown, size: '20px' }))) : null));
             })))),
-        data.length ? (React.createElement("tbody", null, data.map(function (row, i) {
-            return (React.createElement(Row, { "$bgColor": i % 2 === 0 ? '#ffffff' : '#f9f9f9', "$isClickable": !!onRowClick, key: i, onClick: onRowClick ? onRowClick.bind(null, row) : undefined }, columns.map(function (column, i) {
+        data.length ? (React.createElement("tbody", null, data.map((row, i) => {
+            return (React.createElement(Row, { "$bgColor": i % 2 === 0 ? '#ffffff' : '#f9f9f9', "$isClickable": !!onRowClick, key: i, onClick: onRowClick ? onRowClick.bind(null, row) : undefined }, columns.map((column, i) => {
                 return (React.createElement(Column, { "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
             })));
         }))) : null));
-};
-var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
-
-var Wrapper$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  align-items: flex-end;\n  border-top: 1px solid #e5e5e5;\n  border-bottom: 1px solid #e5e5e5;\n  flex-shrink: 0;\n  align-self: stretch;\n  padding: 0;\n  margin: 0;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  align-items: flex-end;\n  border-top: 1px solid #e5e5e5;\n  border-bottom: 1px solid #e5e5e5;\n  flex-shrink: 0;\n  align-self: stretch;\n  padding: 0;\n  margin: 0;\n"])));
-var Tab = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  color: ", ";\n  line-height: 1em;\n  padding: 16px 30px 12px;\n  margin: 0 0 -1px 0;\n  border-bottom-width: 4px;\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n  &:hover {\n    color: ", ";\n    font-weight: 500;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  color: ", ";\n  line-height: 1em;\n  padding: 16px 30px 12px;\n  margin: 0 0 -1px 0;\n  border-bottom-width: 4px;\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n  &:hover {\n    color: ", ";\n    font-weight: 500;\n  }\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$isActive ? 500 : 400); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex); }, function (props) { return (props.$isActive ? Colors.PRIMARY.Hex : 'transparent'); }, function (props) { return (props.$isActive ? 'default' : 'pointer'); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.PRIMARY.Hex); });
-var Badge = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  display: flex;\n  width: 18px;\n  height: 18px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 9px;\n  background: ", ";\n  color: #fff;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 1px;\n"], ["\n  display: flex;\n  width: 18px;\n  height: 18px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 9px;\n  background: ", ";\n  color: #fff;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 1px;\n"])), function (props) { return (props.$isError ? Colors.RED.Hex : Colors.PRIMARY.Hex); }, FontStyles.DEFAULT);
-var Tabs = function (_a) {
-    var tabs = _a.tabs, accessibleProps = __rest(_a, ["tabs"]);
-    return (React.createElement(Wrapper$2, __assign({}, accessibleProps), tabs.map(function (_a, i) {
-        var isActive = _a.isActive, label = _a.label, badgeCount = _a.badgeCount, errorBadge = _a.errorBadge, onClick = _a.onClick, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
-        return (React.createElement(Tab, __assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps),
+};
+
+const Wrapper$2 = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-end;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 0;
+  margin: 0;
+`;
+const Tab = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
+  line-height: 1em;
+  padding: 16px 30px 12px;
+  margin: 0 0 -1px 0;
+  border-bottom-width: 4px;
+  border-bottom-style: solid;
+  border-bottom-color: ${props => (props.$isActive ? Colors.PRIMARY.Hex : 'transparent')};
+  cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
+  box-sizing: border-box;
+  &:hover {
+    color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.PRIMARY.Hex)};
+    font-weight: 500;
+  }
+`;
+const Badge = styled.div `
+  display: flex;
+  width: 18px;
+  height: 18px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 9px;
+  background: ${props => (props.$isError ? Colors.RED.Hex : Colors.PRIMARY.Hex)};
+  color: #fff;
+  font-family: ${FontStyles.DEFAULT};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 1px;
+`;
+const Tabs = (_a) => {
+    var { tabs } = _a, accessibleProps = __rest(_a, ["tabs"]);
+    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
+        var { isActive, label, badgeCount, errorBadge, onClick } = _a, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
+        return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps),
             badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
             label));
     })));
 };
-Tabs.defaultProps = {};
-var templateObject_1$3, templateObject_2$3, templateObject_3$2;
-
-var Wrapper$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"], ["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$removable ? 'pointer' : 'default'); });
-var Content = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"])), function (props) { return (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff'); }, FontSizes.SMALL, FontStyles.DEFAULT);
-var Remove = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"])));
-var Tag = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'PRIMARY' : _b, removable = _a.removable, onClick = _a.onClick, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
-    return (React.createElement(Wrapper$1, __assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
+Tabs.defaultProps = {};
+
+const Wrapper$1 = styled.div `
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: ${props => Colors[props.$color].Hex};
+  color: #ffffff;
+  box-sizing: border-box;
+  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+`;
+const Content = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Label = styled.div `
+  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
+  font-size: ${FontSizes.SMALL};
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.2em;
+`;
+const Remove = styled.div `
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+`;
+const Tag = (_a) => {
+    var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
+    return (React.createElement(Wrapper$1, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
         React.createElement(Content, null,
             React.createElement(Label, { "$color": color }, children),
             removable ? (React.createElement(Remove, null,
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
-};
-var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4;
+};
 
-var Track = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: 24px;\n  border-radius: 12px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  padding: 2px;\n  box-sizing: border-box;\n"], ["\n  height: 24px;\n  border-radius: 12px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  padding: 2px;\n  box-sizing: border-box;\n"])), function (props) { return (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex); });
-var Handle = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: #ffffff;\n  margin-left: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: #ffffff;\n  margin-left: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$on ? 'auto' : '0px'); });
-var Toggle = function (_a) {
-    var onClick = _a.onClick, on = _a.on, accessibleProps = __rest(_a, ["onClick", "on"]);
-    return (React.createElement(Track, __assign({ "$on": on, onClick: onClick }, accessibleProps),
+const Track = styled.div `
+  height: 24px;
+  border-radius: 12px;
+  background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 40px;
+  padding: 2px;
+  box-sizing: border-box;
+`;
+const Handle = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: #ffffff;
+  margin-left: ${props => (props.$on ? 'auto' : '0px')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+`;
+const Toggle = (_a) => {
+    var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
+    return (React.createElement(Track, Object.assign({ "$on": on, onClick: onClick }, accessibleProps),
         React.createElement("input", { checked: on, name: accessibleProps.name, type: 'hidden' }),
         React.createElement(Handle, { "$on": on },
             React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
 };
-Toggle.defaultProps = {};
-var templateObject_1$1, templateObject_2$1;
-
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 40px auto;\n  gap: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 40px auto;\n  gap: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n"])));
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  gap: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n"], ["\n  gap: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n"])));
-var StyledIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 40px;\n  background: #f5f5f5;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 40px;\n  background: #f5f5f5;\n"])));
-var ZeroState = function (_a) {
-    var icon = _a.icon, title = _a.title, description = _a.description, action = _a.action, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
-    return (React.createElement(Container, __assign({}, accessibleProps),
+Toggle.defaultProps = {};
+
+const Container = styled.div `
+  width: 100%;
+  padding: 40px auto;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const Wrapper = styled.div `
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: #f5f5f5;
+`;
+const ZeroState = (_a) => {
+    var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
+    return (React.createElement(Container, Object.assign({}, accessibleProps),
         React.createElement(StyledIcon, null,
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: icon, size: '40px' })),
         React.createElement(Wrapper, null,
             React.createElement(Heading, { children: title, type: 'tertiary' }),
             description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
-};
-var templateObject_1, templateObject_2, templateObject_3;
+};
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
 //# sourceMappingURL=index.js.map