@xqmsg/ui-core 0.12.0 → 0.14.0

package/dist/ui-core.esm.js

@@ -1,77 +1,18 @@
-import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { Image, Alert as Alert$1, AlertDescription, Box, Flex, Button as Button$2, Text as Text$2, Icon as Icon$1, Spinner, InputGroup, Checkbox, Input as Input$2, RadioGroup, Radio, useOutsideClick, InputRightElement, Textarea as Textarea$1, Switch as Switch$1, FormLabel as FormLabel$1, FormControl, FormErrorMessage, FormHelperText, SimpleGrid, useMediaQuery, Grid, GridItem, IconButton, Collapse, TableContainer, Table as Table$2, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, extendTheme, ChakraProvider } from '@chakra-ui/react';
-import colors$1 from 'src/theme/foundations/colors';
 import { FormProvider, useWatch, Controller } from 'react-hook-form';
 import { CloseIcon as CloseIcon$1, HamburgerIcon } from '@chakra-ui/icons';
 import { HiOutlineRefresh } from 'react-icons/hi';
 import { createBreakpoints, transparentize, mode, getColor } from '@chakra-ui/theme-tools';
 import { defineStyle } from '@chakra-ui/system';
 
-var ErrorIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 5.5L8.5 8.5M8.5 5.5L5.5 8.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z\" stroke=\"#F96057\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+var ErrorIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.5%205.5L8.5%208.5M8.5%205.5L5.5%208.5M13%207C13%2010.3137%2010.3137%2013%207%2013C3.68629%2013%201%2010.3137%201%207C1%203.68629%203.68629%201%207%201C10.3137%201%2013%203.68629%2013%207Z%22%20stroke%3D%22%23F96057%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
-var PositiveIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 7.5L6.5 9L9 5.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z\" stroke=\"#34C759\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
+var PositiveIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%207.5L6.5%209L9%205.5M13%207C13%2010.3137%2010.3137%2013%207%2013C3.68629%2013%201%2010.3137%201%207C1%203.68629%203.68629%201%207%201C10.3137%201%2013%203.68629%2013%207Z%22%20stroke%3D%22%2334C759%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
-var NeutralIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 4.5V4C6.72386 4 6.5 4.22386 6.5 4.5H7ZM7.005 4.5H7.505C7.505 4.22386 7.28114 4 7.005 4V4.5ZM7.005 4.505V5.005C7.28114 5.005 7.505 4.78114 7.505 4.505H7.005ZM7 4.505H6.5C6.5 4.78114 6.72386 5.005 7 5.005V4.505ZM6.27639 6.05279C6.0294 6.17628 5.92929 6.47662 6.05279 6.72361C6.17628 6.9706 6.47662 7.07071 6.72361 6.94721L6.27639 6.05279ZM6.52766 6.48617L6.30405 6.03896L6.52766 6.48617ZM7.23634 7.05465L7.72141 7.17592L7.23634 7.05465ZM6.76366 8.94535L6.27859 8.82408L6.76366 8.94535ZM7.47234 9.51383L7.69595 9.96104L7.69595 9.96104L7.47234 9.51383ZM7.72361 9.94721C7.9706 9.82371 8.07071 9.52337 7.94721 9.27639C7.82371 9.0294 7.52337 8.92929 7.27639 9.05279L7.72361 9.94721ZM12.5 7C12.5 10.0376 10.0376 12.5 7 12.5V13.5C10.5899 13.5 13.5 10.5899 13.5 7H12.5ZM7 12.5C3.96243 12.5 1.5 10.0376 1.5 7H0.5C0.5 10.5899 3.41015 13.5 7 13.5V12.5ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5V0.5C3.41015 0.5 0.5 3.41015 0.5 7H1.5ZM7 1.5C10.0376 1.5 12.5 3.96243 12.5 7H13.5C13.5 3.41015 10.5899 0.5 7 0.5V1.5ZM7 5H7.005V4H7V5ZM6.505 4.5V4.505H7.505V4.5H6.505ZM7.005 4.005H7V5.005H7.005V4.005ZM7.5 4.505V4.5H6.5V4.505H7.5ZM6.72361 6.94721L6.75127 6.93338L6.30405 6.03896L6.27639 6.05279L6.72361 6.94721ZM6.75127 6.93338L6.27859 8.82408L7.24873 9.06662L7.72141 7.17592L6.75127 6.93338ZM7.69595 9.96104L7.72361 9.94721L7.27639 9.05279L7.24873 9.06662L7.69595 9.96104ZM6.27859 8.82408C6.07138 9.65293 6.93179 10.3431 7.69595 9.96104L7.24873 9.06662L6.27859 8.82408ZM6.75127 6.93338L7.72141 7.17592C7.92862 6.34708 7.06821 5.65688 6.30405 6.03896L6.75127 6.93338Z\" fill=\"#3C3C43\" fill-opacity=\"0.6\"/>\n</svg>";
+var NeutralIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%204.5V4C6.72386%204%206.5%204.22386%206.5%204.5H7ZM7.005%204.5H7.505C7.505%204.22386%207.28114%204%207.005%204V4.5ZM7.005%204.505V5.005C7.28114%205.005%207.505%204.78114%207.505%204.505H7.005ZM7%204.505H6.5C6.5%204.78114%206.72386%205.005%207%205.005V4.505ZM6.27639%206.05279C6.0294%206.17628%205.92929%206.47662%206.05279%206.72361C6.17628%206.9706%206.47662%207.07071%206.72361%206.94721L6.27639%206.05279ZM6.52766%206.48617L6.30405%206.03896L6.52766%206.48617ZM7.23634%207.05465L7.72141%207.17592L7.23634%207.05465ZM6.76366%208.94535L6.27859%208.82408L6.76366%208.94535ZM7.47234%209.51383L7.69595%209.96104L7.69595%209.96104L7.47234%209.51383ZM7.72361%209.94721C7.9706%209.82371%208.07071%209.52337%207.94721%209.27639C7.82371%209.0294%207.52337%208.92929%207.27639%209.05279L7.72361%209.94721ZM12.5%207C12.5%2010.0376%2010.0376%2012.5%207%2012.5V13.5C10.5899%2013.5%2013.5%2010.5899%2013.5%207H12.5ZM7%2012.5C3.96243%2012.5%201.5%2010.0376%201.5%207H0.5C0.5%2010.5899%203.41015%2013.5%207%2013.5V12.5ZM1.5%207C1.5%203.96243%203.96243%201.5%207%201.5V0.5C3.41015%200.5%200.5%203.41015%200.5%207H1.5ZM7%201.5C10.0376%201.5%2012.5%203.96243%2012.5%207H13.5C13.5%203.41015%2010.5899%200.5%207%200.5V1.5ZM7%205H7.005V4H7V5ZM6.505%204.5V4.505H7.505V4.5H6.505ZM7.005%204.005H7V5.005H7.005V4.005ZM7.5%204.505V4.5H6.5V4.505H7.5ZM6.72361%206.94721L6.75127%206.93338L6.30405%206.03896L6.27639%206.05279L6.72361%206.94721ZM6.75127%206.93338L6.27859%208.82408L7.24873%209.06662L7.72141%207.17592L6.75127%206.93338ZM7.69595%209.96104L7.72361%209.94721L7.27639%209.05279L7.24873%209.06662L7.69595%209.96104ZM6.27859%208.82408C6.07138%209.65293%206.93179%2010.3431%207.69595%209.96104L7.24873%209.06662L6.27859%208.82408ZM6.75127%206.93338L7.72141%207.17592C7.92862%206.34708%207.06821%205.65688%206.30405%206.03896L6.75127%206.93338Z%22%20fill%3D%22%233C3C43%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E";
 
-var WarningIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 5V7.5M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM7 9.5H7.005V9.505H7V9.5Z\" stroke=\"#F8CE52\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>";
-
-/**
- * A functional React component utilized to render the `Banner` component
- */
-
-var Banner = function Banner(_ref) {
-  var variant = _ref.variant,
-      message = _ref.message,
-      buttonText = _ref.buttonText,
-      onClick = _ref.onClick;
-  var Icon = useMemo(function () {
-    switch (variant) {
-      case 'error':
-        return /*#__PURE__*/React.createElement(Image, {
-          src: ErrorIcon,
-          alt: "error",
-          boxSize: "16px"
-        });
-
-      case 'neutral':
-        return /*#__PURE__*/React.createElement(Image, {
-          src: NeutralIcon,
-          alt: "neutral",
-          boxSize: "16px"
-        });
-
-      case 'positive':
-        return /*#__PURE__*/React.createElement(Image, {
-          src: PositiveIcon,
-          alt: "positive",
-          boxSize: "16px"
-        });
-
-      case 'warning':
-        return /*#__PURE__*/React.createElement(Image, {
-          src: WarningIcon,
-          alt: "warning",
-          boxSize: "16px"
-        });
-
-      default:
-        return null;
-    }
-  }, [variant]);
-  return /*#__PURE__*/React.createElement(Alert$1, {
-    variant: variant
-  }, /*#__PURE__*/React.createElement(AlertDescription, null, /*#__PURE__*/React.createElement(Box, {
-    pb: "8px"
-  }, Icon), message, onClick && buttonText && /*#__PURE__*/React.createElement(Flex, {
-    pt: "8px",
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React.createElement(Button$2, {
-    size: "sm",
-    bg: "white",
-    color: colors$1.fill.action,
-    onClick: onClick
-  }, buttonText))));
-};
+var WarningIcon = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%205V7.5M13%207C13%2010.3137%2010.3137%2013%207%2013C3.68629%2013%201%2010.3137%201%207C1%203.68629%203.68629%201%207%201C10.3137%201%2013%203.68629%2013%207ZM7%209.5H7.005V9.505H7V9.5Z%22%20stroke%3D%22%23F8CE52%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
 
 var blue = {
   50: 'hsl(209, 100%, 95%)',
@@ -208,6 +149,64 @@ var colors = {
   blue: blue
 };
 
+/**
+ * A functional React component utilized to render the `Banner` component
+ */
+
+var Banner = function Banner(_ref) {
+  var variant = _ref.variant,
+      message = _ref.message,
+      buttonText = _ref.buttonText,
+      onClick = _ref.onClick;
+  var Icon = useMemo(function () {
+    switch (variant) {
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: ErrorIcon,
+          alt: "error",
+          boxSize: "16px"
+        });
+
+      case 'neutral':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: NeutralIcon,
+          alt: "neutral",
+          boxSize: "16px"
+        });
+
+      case 'positive':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: PositiveIcon,
+          alt: "positive",
+          boxSize: "16px"
+        });
+
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(Image, {
+          src: WarningIcon,
+          alt: "warning",
+          boxSize: "16px"
+        });
+
+      default:
+        return null;
+    }
+  }, [variant]);
+  return /*#__PURE__*/React__default.createElement(Alert$1, {
+    variant: variant
+  }, /*#__PURE__*/React__default.createElement(AlertDescription, null, /*#__PURE__*/React__default.createElement(Box, {
+    pb: "8px"
+  }, Icon), message, onClick && buttonText && /*#__PURE__*/React__default.createElement(Flex, {
+    pt: "8px",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(Button$2, {
+    size: "sm",
+    bg: "white",
+    color: colors.fill.action,
+    onClick: onClick
+  }, buttonText))));
+};
+
 /**
  * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
  */
@@ -236,13 +235,13 @@ var Icon = function Icon(_ref) {
         };
     }
   }, [status]);
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
     boxSize: "20px",
     bg: getColors.bg,
     borderRadius: "100%",
     alignItems: "center",
     justifyContent: "center"
-  }, /*#__PURE__*/React.createElement(Text$2, {
+  }, /*#__PURE__*/React__default.createElement(Text$2, {
     fontSize: "12px",
     color: getColors.color
   }, step));
@@ -254,9 +253,9 @@ var Icon = function Icon(_ref) {
 
 var Label = function Label(_ref) {
   var label = _ref.label;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     pl: "8px"
-  }, /*#__PURE__*/React.createElement(Text$2, {
+  }, /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.primary.light,
     fontSize: "13px"
   }, label));
@@ -279,17 +278,17 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     if (activeStepIndex < stepIndex) return 'inactive';
     return 'active';
   }, [activeStepIndex]);
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
     flexDir: orientation === 'horizontal' ? 'row' : 'column'
   }, steps.map(function (step, idx) {
-    return /*#__PURE__*/React.createElement(Flex, {
+    return /*#__PURE__*/React__default.createElement(Flex, {
       alignItems: "center",
       pr: orientation === 'horizontal' ? '16px' : 0,
       py: "4px"
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       step: idx + 1,
       status: getStatus(idx)
-    }), /*#__PURE__*/React.createElement(Label, {
+    }), /*#__PURE__*/React__default.createElement(Label, {
       label: step
     }));
   }));
@@ -310,7 +309,7 @@ var Button = function Button(_ref) {
       disabled = _ref.disabled,
       className = _ref.className,
       width = _ref.width;
-  return /*#__PURE__*/React.createElement(Button$2, {
+  return /*#__PURE__*/React__default.createElement(Button$2, {
     onClick: onClick,
     type: type,
     variant: variant,
@@ -321,7 +320,7 @@ var Button = function Button(_ref) {
   }, text);
 };
 
-var GoogleLogo = "<svg viewBox=\"0 0 533.5 544.3\" xmlns=\"http://www.w3.org/2000/svg\"><path\n    d=\"M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z\"\n    fill=\"#4285f4\"\n  /><path\n    d=\"M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z\"\n    fill=\"#34a853\"\n  /><path\n    d=\"M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z\"\n    fill=\"#fbbc04\"\n  /><path\n    d=\"M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z\"\n    fill=\"#ea4335\"\n  /></svg>";
+var GoogleLogo = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20533.5%20544.3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20%20%20%20d%3D%22M533.5%20278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1%2033.8-25.7%2063.7-54.4%2082.7v68h87.7c51.5-47.4%2081.1-117.4%2081.1-200.2z%22%20%20%20%20fill%3D%22%234285f4%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M272.1%20544.3c73.4%200%20135.3-24.1%20180.4-65.7l-87.7-68c-24.4%2016.6-55.9%2026-92.6%2026-71%200-131.2-47.9-152.8-112.3H28.9v70.1c46.2%2091.9%20140.3%20149.9%20243.2%20149.9z%22%20%20%20%20fill%3D%22%2334a853%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M119.3%20324.3c-11.4-33.8-11.4-70.4%200-104.2V150H28.9c-38.6%2076.9-38.6%20167.5%200%20244.4l90.4-70.1z%22%20%20%20%20fill%3D%22%23fbbc04%22%20%20%2F%3E%3Cpath%20%20%20%20d%3D%22M272.1%20107.7c38.8-.6%2076.3%2014%20104.4%2040.8l77.7-77.7C405%2024.6%20339.7-.8%20272.1%200%20169.2%200%2075.1%2058%2028.9%20150l90.4%2070.1c21.5-64.5%2081.8-112.4%20152.8-112.4z%22%20%20%20%20fill%3D%22%23ea4335%22%20%20%2F%3E%3C%2Fsvg%3E";
 
 /**
  * A functional React component utilized to render the `GoogleButton` component
@@ -329,7 +328,7 @@ var GoogleLogo = "<svg viewBox=\"0 0 533.5 544.3\" xmlns=\"http://www.w3.org/200
 
 var GoogleButton = function GoogleButton(_ref) {
   var onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement(Button$2, {
+  return /*#__PURE__*/React__default.createElement(Button$2, {
     onClick: onClick,
     variant: "plain",
     size: "lg",
@@ -337,7 +336,7 @@ var GoogleButton = function GoogleButton(_ref) {
     "aria-label": "google-login-button",
     className: "google-button",
     px: 4,
-    leftIcon: /*#__PURE__*/React.createElement(Icon$1, {
+    leftIcon: /*#__PURE__*/React__default.createElement(Icon$1, {
       as: GoogleLogo,
       width: 18,
       height: 18,
@@ -348,7 +347,7 @@ var GoogleButton = function GoogleButton(_ref) {
     fontSize: 14,
     backgroundColor: "white",
     boxShadow: "rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.24) 0px 2px 2px 0px"
-  }, /*#__PURE__*/React.createElement(Text$2, {
+  }, /*#__PURE__*/React__default.createElement(Text$2, {
     color: "rgba(0, 0, 0, 0.54)"
   }, 'Sign in with Google'));
 };
@@ -367,8 +366,8 @@ var SpinnerButton = function SpinnerButton(_ref) {
       variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
       disabled = _ref.disabled,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement(Button$2, {
-    spinner: /*#__PURE__*/React.createElement(Spinner, {
+  return /*#__PURE__*/React__default.createElement(Button$2, {
+    spinner: /*#__PURE__*/React__default.createElement(Spinner, {
       size: 'md'
     }),
     isLoading: isLoading,
@@ -392,7 +391,7 @@ function Form(_ref) {
       children = _ref.children;
   var form = formHandler.form,
       onSubmit = formHandler.onSubmit;
-  return /*#__PURE__*/React.createElement(FormProvider, Object.assign({}, form), /*#__PURE__*/React.createElement("form", {
+  return /*#__PURE__*/React__default.createElement(FormProvider, Object.assign({}, form), /*#__PURE__*/React__default.createElement("form", {
     onSubmit: onSubmit
   }, children));
 }
@@ -401,14 +400,14 @@ function Form(_ref) {
  * A functional React component utilized to render the `StackedCheckbox` component.
  */
 
-var StackedCheckboxGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedCheckboxGroup = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var options = _ref2.options;
-  return /*#__PURE__*/React.createElement(InputGroup, null, options.map(function (option) {
-    return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(Flex, {
       mr: "30px",
       alignItems: "center",
       key: option.value
-    }, /*#__PURE__*/React.createElement(Checkbox, {
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
       ref: _ref,
       value: option.value
     }, option.label));
@@ -452,13 +451,13 @@ var _excluded = ["type", "isRequired"];
  * A functional React component utilized to render the `StackedInput` component.
  */
 
-var StackedInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'text' : _ref2$type,
       isRequired = _ref2.isRequired,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React.createElement(Input$2, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
     ref: _ref,
     type: type,
     isRequired: isRequired
@@ -469,27 +468,27 @@ var StackedInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
  * A functional React component utilized to render the `StackedRadio` component.
  */
 
-var StackedRadioGroup = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var id = _ref2.id,
       _ref2$flexDirection = _ref2.flexDirection,
       flexDirection = _ref2$flexDirection === void 0 ? 'row' : _ref2$flexDirection,
       options = _ref2.options;
-  return /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(RadioGroup, {
+  return /*#__PURE__*/React__default.createElement(InputGroup, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
     name: id
   }, options.map(function (option) {
-    return /*#__PURE__*/React.createElement(Flex, {
+    return /*#__PURE__*/React__default.createElement(Flex, {
       mr: "30px",
       alignItems: "center",
       key: option.value,
       flexDirection: flexDirection
-    }, /*#__PURE__*/React.createElement(Radio, {
+    }, /*#__PURE__*/React__default.createElement(Radio, {
       ref: _ref,
       value: option.value
     }, option.label));
   })));
 });
 
-var SubtractIcon = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 12C0.89543 12 -3.91405e-08 11.1046 -8.74228e-08 10L-4.37114e-07 2C-4.85396e-07 0.895431 0.89543 -3.91405e-08 2 -8.74228e-08L10 -4.37114e-07C11.1046 -4.85396e-07 12 0.89543 12 2L12 10C12 11.1046 11.1046 12 10 12L2 12ZM6 2.5C6.13261 2.5 6.25979 2.55268 6.35355 2.64645L7.85355 4.14645C8.04881 4.34171 8.04881 4.65829 7.85355 4.85355C7.65829 5.04882 7.34171 5.04882 7.14645 4.85355L6 3.70711L4.85355 4.85355C4.65829 5.04882 4.34171 5.04882 4.14645 4.85355C3.95118 4.65829 3.95118 4.34171 4.14645 4.14645L5.64645 2.64645C5.74021 2.55268 5.86739 2.5 6 2.5ZM5.64645 9.35355C5.74021 9.44732 5.86739 9.5 6 9.5C6.13261 9.5 6.25978 9.44732 6.35355 9.35355L7.85355 7.85355C8.04882 7.65829 8.04882 7.34171 7.85355 7.14645C7.65829 6.95118 7.34171 6.95118 7.14645 7.14645L6 8.29289L4.85355 7.14645C4.65829 6.95118 4.34171 6.95118 4.14645 7.14645C3.95118 7.34171 3.95118 7.65829 4.14645 7.85355L5.64645 9.35355Z\" fill=\"#0082FF\"/>\n</svg>";
+var SubtractIcon = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2012C0.89543%2012%20-3.91405e-08%2011.1046%20-8.74228e-08%2010L-4.37114e-07%202C-4.85396e-07%200.895431%200.89543%20-3.91405e-08%202%20-8.74228e-08L10%20-4.37114e-07C11.1046%20-4.85396e-07%2012%200.89543%2012%202L12%2010C12%2011.1046%2011.1046%2012%2010%2012L2%2012ZM6%202.5C6.13261%202.5%206.25979%202.55268%206.35355%202.64645L7.85355%204.14645C8.04881%204.34171%208.04881%204.65829%207.85355%204.85355C7.65829%205.04882%207.34171%205.04882%207.14645%204.85355L6%203.70711L4.85355%204.85355C4.65829%205.04882%204.34171%205.04882%204.14645%204.85355C3.95118%204.65829%203.95118%204.34171%204.14645%204.14645L5.64645%202.64645C5.74021%202.55268%205.86739%202.5%206%202.5ZM5.64645%209.35355C5.74021%209.44732%205.86739%209.5%206%209.5C6.13261%209.5%206.25978%209.44732%206.35355%209.35355L7.85355%207.85355C8.04882%207.65829%208.04882%207.34171%207.85355%207.14645C7.65829%206.95118%207.34171%206.95118%207.14645%207.14645L6%208.29289L4.85355%207.14645C4.65829%206.95118%204.34171%206.95118%204.14645%207.14645C3.95118%207.34171%203.95118%207.65829%204.14645%207.85355L5.64645%209.35355Z%22%20fill%3D%22%230082FF%22%2F%3E%3C%2Fsvg%3E";
 
 /**
  * A functional React component utilized to render the `Dropdown` component
@@ -500,16 +499,16 @@ var Dropdown = function Dropdown(_ref) {
       options = _ref.options;
   var DropdownContent = useMemo(function () {
     return options.map(function (option, idx) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React.createElement(Box, {
-        color: colors$1.label.secondary.light,
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, option.value === 'section_header' && options[idx + 1] && options[idx + 1].value !== 'section_header' && /*#__PURE__*/React__default.createElement(Box, {
+        color: colors.label.secondary.light,
         fontSize: "13px",
         fontWeight: "bold",
         px: "8px"
-      }, idx > 0 && /*#__PURE__*/React.createElement(Box, {
+      }, idx > 0 && /*#__PURE__*/React__default.createElement(Box, {
         my: "3px",
         borderTop: "2px solid",
-        borderColor: colors$1.border["default"]
-      }), option.label), option.value !== 'section_header' && /*#__PURE__*/React.createElement(Box, {
+        borderColor: colors.border["default"]
+      }), option.label), option.value !== 'section_header' && /*#__PURE__*/React__default.createElement(Box, {
         cursor: "pointer",
         borderRadius: "inherit",
         onClick: function onClick() {
@@ -519,17 +518,17 @@ var Dropdown = function Dropdown(_ref) {
         fontSize: "13px",
         px: "8px",
         py: "4px",
-        color: colors$1.label.primary.light,
+        color: colors.label.primary.light,
         _hover: {
-          color: colors$1.label.primary.dark,
-          bg: colors$1.fill.action,
+          color: colors.label.primary.dark,
+          bg: colors.fill.action,
           borderRadius: '4px'
         }
       }, option.label));
     });
   }, [onSelectItem, options]);
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: colors$1.fill.light.quaternary,
+  return /*#__PURE__*/React__default.createElement(Box, {
+    bg: colors.fill.light.quaternary,
     backdropFilter: "blur(64px)",
     borderRadius: "4px",
     mt: "3px",
@@ -543,16 +542,20 @@ var Dropdown = function Dropdown(_ref) {
   }, DropdownContent);
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "onChange"];
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "defaultValue"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
 
-var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
+  var _options$find$label, _options$find;
+
   var isRequired = _ref2.isRequired,
       options = _ref2.options,
       name = _ref2.name,
       setValue = _ref2.setValue,
+      handleOnChange = _ref2.handleOnChange,
+      defaultValue = _ref2.defaultValue,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
   var dropdownRef = useRef(null);
@@ -561,7 +564,9 @@ var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
       isFocussed = _useState[0],
       setIsFocussed = _useState[1];
 
-  var _useState2 = useState(''),
+  var _useState2 = useState((_options$find$label = (_options$find = options.find(function (option) {
+    return option.value === defaultValue;
+  })) == null ? void 0 : _options$find.label) != null ? _options$find$label : ''),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
@@ -573,15 +578,19 @@ var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
   });
 
   var handleOnSelectItem = function handleOnSelectItem(option) {
+    if (handleOnChange) {
+      handleOnChange(option.value);
+    }
+
     setValue(name, option.value);
     setSelectedOption(option.label);
     setIsFocussed(false);
   };
 
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     ref: dropdownRef,
     position: "relative"
-  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input$2, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(InputGroup, null, /*#__PURE__*/React__default.createElement(Input$2, Object.assign({
     isRequired: isRequired
   }, props, {
     ref: _ref,
@@ -591,18 +600,18 @@ var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     cursor: "pointer",
     color: "transparent",
     fontSize: "13px",
-    textShadow: "0 0 0 " + colors$1.label.primary.light,
+    textShadow: "0 0 0 " + colors.label.primary.light,
     value: selectedOption
-  })), /*#__PURE__*/React.createElement(InputRightElement, {
+  })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     cursor: "pointer",
     onClick: function onClick() {
       return setIsFocussed(!isFocussed);
     }
-  }, /*#__PURE__*/React.createElement(Image, {
+  }, /*#__PURE__*/React__default.createElement(Image, {
     src: SubtractIcon,
     alt: "subtract",
     boxSize: "16px"
-  }))), isFocussed && /*#__PURE__*/React.createElement(Dropdown, {
+  }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     onSelectItem: function onSelectItem(option) {
       return handleOnSelectItem(option);
     },
@@ -614,32 +623,32 @@ var StackedSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
  * A functional React component utilized to render the `StackedTextarea` component.
  */
 
-var StackedTextarea = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var props = _extends({}, _ref2);
 
-  return /*#__PURE__*/React.createElement(Textarea$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Textarea$1, Object.assign({
     ref: _ref
   }, props));
 });
 
-var CloseIcon = "<svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M27.9995 56C43.4635 56 55.9995 43.464 55.9995 28C55.9995 12.536 43.4635 0 27.9995 0C12.5355 0 -0.000488281 12.536 -0.000488281 28C-0.000488281 43.464 12.5355 56 27.9995 56ZM21.9807 18.2688C20.9555 17.2437 19.2935 17.2437 18.2684 18.2688C17.2432 19.294 17.2432 20.956 18.2684 21.9812L24.2872 28L18.2684 34.0188C17.2432 35.044 17.2432 36.706 18.2684 37.7312C19.2935 38.7563 20.9555 38.7563 21.9807 37.7312L27.9995 31.7123L34.0184 37.7312C35.0435 38.7563 36.7055 38.7563 37.7307 37.7312C38.7558 36.706 38.7558 35.044 37.7307 34.0188L31.7118 28L37.7307 21.9812C38.7558 20.956 38.7558 19.294 37.7307 18.2688C36.7055 17.2437 35.0435 17.2437 34.0184 18.2688L27.9995 24.2877L21.9807 18.2688Z\" fill=\"#3C3C43\" fill-opacity=\"0.6\"/>\n</svg>";
+var CloseIcon = "data:image/svg+xml,%3Csvg%20width%3D%2256%22%20height%3D%2256%22%20viewBox%3D%220%200%2056%2056%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M27.9995%2056C43.4635%2056%2055.9995%2043.464%2055.9995%2028C55.9995%2012.536%2043.4635%200%2027.9995%200C12.5355%200%20-0.000488281%2012.536%20-0.000488281%2028C-0.000488281%2043.464%2012.5355%2056%2027.9995%2056ZM21.9807%2018.2688C20.9555%2017.2437%2019.2935%2017.2437%2018.2684%2018.2688C17.2432%2019.294%2017.2432%2020.956%2018.2684%2021.9812L24.2872%2028L18.2684%2034.0188C17.2432%2035.044%2017.2432%2036.706%2018.2684%2037.7312C19.2935%2038.7563%2020.9555%2038.7563%2021.9807%2037.7312L27.9995%2031.7123L34.0184%2037.7312C35.0435%2038.7563%2036.7055%2038.7563%2037.7307%2037.7312C38.7558%2036.706%2038.7558%2035.044%2037.7307%2034.0188L31.7118%2028L37.7307%2021.9812C38.7558%2020.956%2038.7558%2019.294%2037.7307%2018.2688C36.7055%2017.2437%2035.0435%2017.2437%2034.0184%2018.2688L27.9995%2024.2877L21.9807%2018.2688Z%22%20fill%3D%22%233C3C43%22%20fill-opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E";
 
 var Token = function Token(_ref) {
   var label = _ref.label,
       onDelete = _ref.onDelete;
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
     key: label,
     borderRadius: "full",
     backgroundColor: "#7676801F",
     alignItems: "center",
-    width: "fit-content",
+    // width="100%"
     pl: "8px",
     pr: "4px",
     py: "2px"
-  }, /*#__PURE__*/React.createElement(Text$2, {
-    color: colors$1.label.primary.light,
+  }, /*#__PURE__*/React__default.createElement(Text$2, {
+    color: colors.label.primary.light,
     fontSize: "13px"
-  }, label), /*#__PURE__*/React.createElement(Image, {
+  }, label), /*#__PURE__*/React__default.createElement(Image, {
     pl: "4px",
     boxSize: "16px",
     src: CloseIcon,
@@ -652,7 +661,7 @@ var Token = function Token(_ref) {
  * A functional React component utilized to render the `StackedMultiSelect` component.
  */
 
-var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedMultiSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var options = _ref2.options,
       setValue = _ref2.setValue,
       control = _ref2.control,
@@ -740,10 +749,10 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     ref: dropdownRef,
     position: "relative"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     fontSize: "13px",
     border: isFocussed ? '2px solid' : '1px solid',
     borderColor: isFocussed ? colors.border.focus : colors.border["default"],
@@ -757,30 +766,30 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     },
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer'
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     height: "28px",
     alignItems: "center"
   }, localValues.length ? localValues.map(function (option) {
-    return /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       mr: "4px"
-    }, /*#__PURE__*/React.createElement(Token, {
+    }, /*#__PURE__*/React__default.createElement(Token, {
       label: option.label,
       onDelete: function onDelete() {
         return handleDelete(option);
       }
     }));
-  }) : /*#__PURE__*/React.createElement(Text$2, {
+  }) : /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.secondary.light,
     fontSize: "13px"
-  }, placeholder)), /*#__PURE__*/React.createElement(Flex, {
+  }, placeholder)), /*#__PURE__*/React__default.createElement(Flex, {
     width: "39px",
     justifyContent: "center",
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Image, {
+  }, /*#__PURE__*/React__default.createElement(Image, {
     src: SubtractIcon,
     alt: "subtract",
     boxSize: "16px"
-  }))), isFocussed && /*#__PURE__*/React.createElement(Dropdown, {
+  }))), isFocussed && /*#__PURE__*/React__default.createElement(Dropdown, {
     onSelectItem: function onSelectItem(option) {
       return handleChange(option);
     },
@@ -792,7 +801,7 @@ var StackedMultiSelect = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
  * A functional React component utilized to render the `StackedPilledInput` component.
  */
 
-var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var name = _ref2.name,
       setValue = _ref2.setValue,
       control = _ref2.control,
@@ -926,9 +935,9 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     ref: inputWrapperRef,
     handler: onBlur
   });
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     position: "relative"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     fontSize: "13px",
     border: isFocussed ? '2px solid' : '1px solid',
     borderColor: isFocussed ? colors.border.focus : colors.border["default"],
@@ -947,19 +956,28 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
     bg: disabled ? colors.fill.light.quaternary : '#ffffff',
     cursor: disabled ? 'not-allowed' : 'pointer',
     ref: inputWrapperRef
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     height: "28px",
     alignItems: "center",
-    width: "fit-content"
+    // width="fit-content"
+    // maxW="70%"
+    overflowX: "auto",
+    style: {
+      scrollbarWidth: 'none'
+      /* Firefox */
+
+    }
   }, lastestFormValueToArray.length ? lastestFormValueToArray.map(function (label, index) {
-    return /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       mr: "4px",
       border: tokenIndex === index ? "2px solid " + colors.border.focus : 'none',
       borderRadius: "full",
       onClick: function onClick() {
         return setTokenIndex(index);
-      }
-    }, /*#__PURE__*/React.createElement(Token, {
+      },
+      // width="fit-content"
+      width: "100%"
+    }, /*#__PURE__*/React__default.createElement(Token, {
       label: label,
       onDelete: function onDelete(e) {
         e.stopPropagation();
@@ -967,12 +985,12 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
         onRemoveTag(index);
       }
     }));
-  }) : /*#__PURE__*/React.createElement(Text$2, {
+  }) : /*#__PURE__*/React__default.createElement(Text$2, {
     color: colors.label.secondary.light,
     fontSize: "13px"
-  }, placeholder)), /*#__PURE__*/React.createElement(Flex, {
+  }, placeholder)), /*#__PURE__*/React__default.createElement(Flex, {
     flex: 1
-  }, /*#__PURE__*/React.createElement(Input$2, {
+  }, /*#__PURE__*/React__default.createElement(Input$2, {
     onKeyDown: onHandleKeyDown,
     type: "text",
     padding: 0,
@@ -998,12 +1016,11 @@ var StackedPilledInput = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
  * A functional React component utilized to render the `StackedSwitch` component.
  */
 
-var StackedSwitch = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+var StackedSwitch = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var isRequired = _ref2.isRequired,
       _onChange = _ref2.onChange,
       value = _ref2.value;
-  if (value === undefined) return null;
-  return /*#__PURE__*/React.createElement(Switch$1, {
+  return /*#__PURE__*/React__default.createElement(Switch$1, {
     size: "lg",
     ref: _ref,
     isRequired: isRequired,
@@ -1022,9 +1039,9 @@ var StackedSwitch = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
 var Label$1 = function Label(_ref) {
   var isRequired = _ref.isRequired,
       label = _ref.label;
-  return /*#__PURE__*/React.createElement(FormLabel$1, null, label, isRequired && /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(FormLabel$1, null, label, isRequired && /*#__PURE__*/React__default.createElement(Box, {
     ml: 1,
-    color: colors$1.label.error
+    color: colors.label.error
   }, "*"));
 };
 
@@ -1054,7 +1071,7 @@ function Input(_ref) {
   var selectedInputField = useCallback(function (onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
-        return /*#__PURE__*/React.createElement(StackedInput, {
+        return /*#__PURE__*/React__default.createElement(StackedInput, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           "aria-label": ariaLabel,
           name: name,
@@ -1071,11 +1088,10 @@ function Input(_ref) {
         });
 
       case 'radio':
-        return /*#__PURE__*/React.createElement(StackedRadioGroup, {
+        return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           options: options,
           onChange: onChange,
@@ -1086,30 +1102,30 @@ function Input(_ref) {
         });
 
       case 'select':
-        return /*#__PURE__*/React.createElement(StackedSelect, {
+        return /*#__PURE__*/React__default.createElement(StackedSelect, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
           isRequired: isRequired,
           isInvalid: isInvalid,
           options: options,
-          onChange: onChange,
+          handleOnChange: onChange,
           onBlur: onBlur,
           setValue: setValue,
           control: control,
           ref: ref,
           disabled: disabled,
           value: value,
+          defaultValue: defaultValue,
           placeholder: placeholder
         });
 
       case 'textarea':
-        return /*#__PURE__*/React.createElement(StackedTextarea, {
+        return /*#__PURE__*/React__default.createElement(StackedTextarea, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
           maxLength: maxLength,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           onChange: onChange,
           onBlur: onBlur,
@@ -1119,11 +1135,10 @@ function Input(_ref) {
         });
 
       case 'checkbox':
-        return /*#__PURE__*/React.createElement(StackedCheckboxGroup, {
+        return /*#__PURE__*/React__default.createElement(StackedCheckboxGroup, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           options: options,
           onChange: onChange,
@@ -1134,7 +1149,7 @@ function Input(_ref) {
         });
 
       case 'multi-select':
-        return /*#__PURE__*/React.createElement(StackedMultiSelect, {
+        return /*#__PURE__*/React__default.createElement(StackedMultiSelect, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
@@ -1151,7 +1166,7 @@ function Input(_ref) {
         });
 
       case 'pilled-text':
-        return /*#__PURE__*/React.createElement(StackedPilledInput, {
+        return /*#__PURE__*/React__default.createElement(StackedPilledInput, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           "aria-label": ariaLabel,
           name: name,
@@ -1167,7 +1182,7 @@ function Input(_ref) {
         });
 
       case 'switch':
-        return /*#__PURE__*/React.createElement(StackedSwitch, {
+        return /*#__PURE__*/React__default.createElement(StackedSwitch, {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
@@ -1181,29 +1196,31 @@ function Input(_ref) {
       default:
         return null;
     }
-  }, [ariaLabel, className, control, disabled, inputType, isInvalid, isRequired, maxLength, name, options, placeholder, setValue]);
-  return /*#__PURE__*/React.createElement(Controller, {
+  }, [ariaLabel, className, control, defaultValue, disabled, inputType, isInvalid, isRequired, maxLength, name, options, placeholder, setValue]);
+  return /*#__PURE__*/React__default.createElement(Controller, {
     control: control,
     name: name,
     defaultValue: defaultValue,
     rules: {
       required: isRequired
     },
+
+    /** @ts-ignore: issues with implicit */
     render: function render(_ref2) {
       var _ref2$field = _ref2.field,
           onBlur = _ref2$field.onBlur,
           fieldOnChange = _ref2$field.onChange,
           ref = _ref2$field.ref,
           value = _ref2$field.value;
-      return /*#__PURE__*/React.createElement(FormControl, {
+      return /*#__PURE__*/React__default.createElement(FormControl, {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
-        py: label ? 6 : 0
-      }, label && /*#__PURE__*/React.createElement(Label$1, {
+        py: label || helperText || isInvalid ? 6 : 0
+      }, label && /*#__PURE__*/React__default.createElement(Label$1, {
         label: label,
         isRequired: isRequired
-      }), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React.createElement(FormHelperText, null, helperText));
+      }), selectedInputField(onChange ? onChange : fieldOnChange, onBlur, ref, value), isInvalid ? /*#__PURE__*/React__default.createElement(FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText));
     }
   });
 }
@@ -1226,7 +1243,7 @@ function FormSection(_ref) {
       columns = _ref$columns === void 0 ? 1 : _ref$columns,
       _ref$spacing = _ref.spacing,
       spacing = _ref$spacing === void 0 ? 0 : _ref$spacing;
-  return /*#__PURE__*/React.createElement(SimpleGrid, {
+  return /*#__PURE__*/React__default.createElement(SimpleGrid, {
     columns: columns,
     spacing: spacing,
     className: "form-section " + (className != null ? className : '')
@@ -1240,7 +1257,7 @@ function FormSection(_ref) {
         ariaLabel = _ref2.ariaLabel,
         disabled = _ref2.disabled,
         defaultValue = _ref2.defaultValue;
-    return /*#__PURE__*/React.createElement(Input, {
+    return /*#__PURE__*/React__default.createElement(Input, {
       control: form.control,
       label: label,
       inputType: inputType,
@@ -1251,7 +1268,8 @@ function FormSection(_ref) {
       isRequired: isRequired,
       maxLength: maxLength,
       isInvalid: !!form.formState.errors[name],
-      defaultValue: defaultValue
+      defaultValue: defaultValue,
+      setValue: form.setValue
     });
   }));
 }
@@ -1265,7 +1283,7 @@ var BorderedBox = function BorderedBox(_ref) {
       boxShadow = _ref.boxShadow,
       _ref$borderRadius = _ref.borderRadius,
       borderRadius = _ref$borderRadius === void 0 ? 'none' : _ref$borderRadius;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     boxShadow: boxShadow,
     borderRadius: borderRadius,
     bg: "white",
@@ -1294,7 +1312,7 @@ var Layout = function Layout(_ref) {
       show = _useState[0],
       setShow = _useState[1];
 
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React__default.createElement(Grid, {
     templateAreas: isLargerThan1200 ? "\"nav header\" \"nav main\"" : "\"header\" \"main\"",
     gridTemplateRows: "auto 1fr",
     gridTemplateColumns: isLargerThan1200 ? navbarWidth + " 1fr" : '100% 1fr',
@@ -1302,23 +1320,23 @@ var Layout = function Layout(_ref) {
     width: "100%",
     gap: "4",
     bg: "#f5f5f5"
-  }, /*#__PURE__*/React.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(GridItem, {
     area: "header",
     p: "20px 20px 10px 10px",
     minHeight: "100px"
-  }, /*#__PURE__*/React.createElement(BorderedBox, {
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
     borderRadius: "md",
     boxShadow: "rgba(235,237,238,.75) 8px 0 30px 10px"
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     flexDirection: "column",
     justifyContent: "center",
     width: "100%",
     pl: '32px',
     py: 5
-  }, /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React__default.createElement(Flex, {
     justifyContent: "space-between",
     alignItems: "center"
-  }, Header, !isLargerThan1200 && /*#__PURE__*/React.createElement(IconButton, {
+  }, Header, !isLargerThan1200 && /*#__PURE__*/React__default.createElement(IconButton, {
     size: "md",
     variant: "unstyled",
     alignSelf: "flex-start",
@@ -1327,23 +1345,23 @@ var Layout = function Layout(_ref) {
     onClick: function onClick() {
       return setShow(!show);
     },
-    icon: show ? /*#__PURE__*/React.createElement(CloseIcon$1, null) : /*#__PURE__*/React.createElement(HamburgerIcon, null),
+    icon: show ? /*#__PURE__*/React__default.createElement(CloseIcon$1, null) : /*#__PURE__*/React__default.createElement(HamburgerIcon, null),
     _focus: {
       boxShadow: 'none'
     }
-  })), !isLargerThan1200 && /*#__PURE__*/React.createElement(Collapse, {
+  })), !isLargerThan1200 && /*#__PURE__*/React__default.createElement(Collapse, {
     "in": show
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
     marginTop: 5
-  }, Navigation))))), isLargerThan1200 && /*#__PURE__*/React.createElement(GridItem, {
+  }, Navigation))))), isLargerThan1200 && /*#__PURE__*/React__default.createElement(GridItem, {
     area: "nav",
     width: navbarWidth
-  }, /*#__PURE__*/React.createElement(BorderedBox, {
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
     boxShadow: "rgba(0, 0, 0, 0.035) 0px 2px 10px"
-  }, Navigation)), /*#__PURE__*/React.createElement(GridItem, {
+  }, Navigation)), /*#__PURE__*/React__default.createElement(GridItem, {
     area: "main",
     p: "0 20px 20px 10px"
-  }, /*#__PURE__*/React.createElement(BorderedBox, {
+  }, /*#__PURE__*/React__default.createElement(BorderedBox, {
     borderRadius: "md",
     boxShadow: "rgba(0, 0, 0, 0.035) 0px 2px 10px"
   }, MainContent)));
@@ -1363,19 +1381,19 @@ var LoadingIndicator = function LoadingIndicator(_ref) {
       _ref$speed = _ref.speed,
       speed = _ref$speed === void 0 ? '0.5s' : _ref$speed,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
     flexDirection: "column",
     alignItems: "center",
     "aria-label": "loading-indicator",
     className: "loading-indicator " + (className != null ? className : '')
-  }, /*#__PURE__*/React.createElement(Spinner, {
+  }, /*#__PURE__*/React__default.createElement(Spinner, {
     size: size,
     color: colors.fill.action,
     flex: "none",
     thickness: thickness,
     speed: speed,
     mb: 2
-  }), text && /*#__PURE__*/React.createElement(Text$2, {
+  }), text && /*#__PURE__*/React__default.createElement(Text$2, {
     fontSize: size,
     lineHeight: "shorter",
     fontWeight: "semibold"
@@ -1452,19 +1470,19 @@ var typography = {
 var TableLoadingRows = function TableLoadingRows(_ref) {
   var isLoading = _ref.isLoading,
       onLoadMore = _ref.onLoadMore;
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React__default.createElement(Flex, {
     width: "full",
     direction: "column",
     justifyContent: "center",
     alignItems: "center",
     height: 20,
     borderTopColor: colors.fill.light.quaternary
-  }, isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+  }, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
     size: "lg",
     color: colors.fill.action
-  }) : /*#__PURE__*/React.createElement(IconButton, {
+  }) : /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": "Fetch more rows",
-    icon: /*#__PURE__*/React.createElement(HiOutlineRefresh, null),
+    icon: /*#__PURE__*/React__default.createElement(HiOutlineRefresh, null),
     fontSize: typography.fontSizes['3xl'],
     bg: "transparent",
     shadow: "none",
@@ -1490,32 +1508,36 @@ function Table(_ref) {
       borderTopRadius = _ref$borderTopRadius === void 0 ? true : _ref$borderTopRadius,
       loadMore = _ref.loadMore;
   var columnsAsConst = generateTableColumnsAsConst(columns);
-  return /*#__PURE__*/React.createElement(TableContainer, {
+  return /*#__PURE__*/React__default.createElement(TableContainer, {
     border: "none",
     overflowX: "auto",
     bg: "white",
     borderRadius: "md",
     borderTopLeftRadius: borderTopRadius ? 'md' : 0,
     borderTopRightRadius: borderTopRadius ? 'md' : 0
-  }, /*#__PURE__*/React.createElement(Table$2, {
+  }, /*#__PURE__*/React__default.createElement(Table$2, {
     variant: "unstyled"
-  }, /*#__PURE__*/React.createElement(Thead, null, /*#__PURE__*/React.createElement(Tr, null, columnsAsConst.map(function (column) {
+  }, /*#__PURE__*/React__default.createElement(Thead, null, /*#__PURE__*/React__default.createElement(Tr, {
+    _odd: {
+      bg: colors.label.primary.dark
+    }
+  }, columnsAsConst.map(function (column) {
     return (
       /*#__PURE__*/
       // @ts-ignore
-      React.createElement(Th, null, headers[column])
+      React__default.createElement(Th, null, headers[column])
     );
-  }))), /*#__PURE__*/React.createElement(Tbody, null, body.map(function (row) {
-    return /*#__PURE__*/React.createElement(Tr, null, columnsAsConst.map(function (column) {
+  }))), /*#__PURE__*/React__default.createElement(Tbody, null, body.map(function (row) {
+    return /*#__PURE__*/React__default.createElement(Tr, null, columnsAsConst.map(function (column) {
       return (
         /*#__PURE__*/
         // @ts-ignore
-        React.createElement(Td, null, row[column])
+        React__default.createElement(Td, null, row[column])
       );
     }));
-  })), !body.length && /*#__PURE__*/React.createElement(TableCaption, {
+  })), !body.length && /*#__PURE__*/React__default.createElement(TableCaption, {
     py: 10
-  }, placeholder), ' '), loadMore && loading !== undefined && /*#__PURE__*/React.createElement(TableLoadingRows, {
+  }, placeholder), ' '), loadMore && loading !== undefined && /*#__PURE__*/React__default.createElement(TableLoadingRows, {
     isLoading: loading,
     onLoadMore: loadMore
   }));
@@ -1530,12 +1552,12 @@ var TabsWrapper = function TabsWrapper(_ref) {
       navItems = _ref.navItems,
       navIndex = _ref.navIndex,
       setNavIndex = _ref.setNavIndex;
-  return /*#__PURE__*/React.createElement(Tabs$1, {
+  return /*#__PURE__*/React__default.createElement(Tabs$1, {
     size: "lg",
     variant: "simple",
     index: navIndex,
     onChange: setNavIndex
-  }, /*#__PURE__*/React.createElement(TabList, {
+  }, /*#__PURE__*/React__default.createElement(TabList, {
     flexDirection: {
       base: 'column',
       sm: 'row'
@@ -1548,7 +1570,7 @@ var TabsWrapper = function TabsWrapper(_ref) {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   }, navItems.map(function (navItem) {
-    return /*#__PURE__*/React.createElement(Tab, null, navItem);
+    return /*#__PURE__*/React__default.createElement(Tab, null, navItem);
   })), children);
 };
 
@@ -1568,7 +1590,7 @@ var Text = function Text(_ref) {
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? colors.label.primary.light : _ref$color,
       className = _ref.className;
-  return /*#__PURE__*/React.createElement(Text$2, {
+  return /*#__PURE__*/React__default.createElement(Text$2, {
     fontSize: fontSize,
     lineHeight: lineHeight,
     letterSpacing: letterSpacing,
@@ -1815,9 +1837,11 @@ function baseStyleRequiredIndicator() {
 
 function baseStyleHelperText() {
   return {
+    position: 'absolute',
     color: colors.label.secondary.light,
     mt: 1,
     ml: 1,
+    bottom: 0,
     fontSize: '13px'
   };
 }
@@ -1839,6 +1863,8 @@ var parts$2 = ['text', 'icon'];
 function baseStyleText() {
   return {
     color: colors.label.error,
+    position: 'absolute',
+    bottom: 0,
     mt: 1,
     ml: 1,
     fontSize: '13px'
@@ -2356,10 +2382,13 @@ var Switch = {
   defaultProps: defaultProps$7
 };
 
-var parts$7 = ['th', 'td', 'tr', 'body'];
+var parts$7 = ['th', 'td', 'tr', 'body', 'thead'];
 var baseStyle$c = {
+  thead: {
+    bg: colors.label.primary.dark
+  },
   th: {
-    height: 'fit-content',
+    height: '100%',
     width: '100%',
     bg: colors.label.primary.dark,
     padding: '5px 8px !important'
@@ -2369,10 +2398,10 @@ var baseStyle$c = {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    height: 'fit-content',
+    height: '100%',
     borderRadius: 'md',
     _odd: {
-      background: colors.fill.light.tertiary
+      bg: colors.fill.light.tertiary
     }
   },
   td: {
@@ -2737,10 +2766,12 @@ var customXQChakraTheme = /*#__PURE__*/extendTheme( /*#__PURE__*/_extends({
  */
 
 var XQThemeProvider = function XQThemeProvider(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ChakraProvider, {
+  var children = _ref.children,
+      cssVarsRoot = _ref.cssVarsRoot;
+  return /*#__PURE__*/React__default.createElement(ChakraProvider, {
     theme: customXQChakraTheme,
-    resetCSS: true
+    resetCSS: true,
+    cssVarsRoot: cssVarsRoot
   }, children);
 };
 
@@ -2770,5 +2801,5 @@ function formatErrorResponse(error) {
   };
 }
 
-export { Banner, Breadcrumbs, Button, Form, FormSection, GoogleButton, Input, Layout, LoadingIndicator, SpinnerButton, Table, TabsWrapper, Text, XQThemeProvider, formatErrorResponse };
+export { Banner, Breadcrumbs, Button, Form, FormSection, GoogleButton, Input, Layout, LoadingIndicator, SpinnerButton, Table, TabsWrapper, Text, XQThemeProvider, colors, formatErrorResponse };
 //# sourceMappingURL=ui-core.esm.js.map