@xqmsg/ui-core 0.12.1 → 0.14.1

package/dist/components/form/hooks/useFormHandler.d.ts

@@ -1,7 +1,7 @@
 import { FormEvent } from 'react';
 import { DeepPartial, FieldValues, UseFormReturn, ValidationMode } from 'react-hook-form';
 import * as Yup from 'yup';
-import { ErrorResponse } from 'src/components/form/utils/formErrors';
+import { ErrorResponse } from '../../../../src/components/form/utils/formErrors';
 export declare type FormHandler<T extends FieldValues> = {
     form: UseFormReturn<T, any>;
     error?: ErrorResponse;

package/dist/components/input/Input.stories.d.ts

@@ -7,6 +7,7 @@ interface StoryFormSchema {
     prop3?: string;
     prop4?: string;
     prop5?: string;
+    prop6?: boolean;
 }
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, InputProps<StoryFormSchema>>;

package/dist/components/input/StackedSelect/StackedSelect.d.ts

@@ -6,6 +6,7 @@ export interface StackedSelectProps extends StackedInputProps {
     options: FieldOptions;
     setValue: UseFormSetValue<FieldValues>;
     control: Control<FieldValues, any>;
+    handleOnChange: (value?: string) => void;
 }
 /**
  * A functional React component utilized to render the `StackedSelect` component.

package/dist/components/input/index.d.ts

@@ -12,10 +12,10 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
     options?: FieldOptions;
     maxLength?: number;
     helperText?: React.ReactNode;
-    control?: Control<T, any>;
-    onChange?: (args?: any) => void;
+    control: Control<T, any>;
+    onChange?: (value?: string) => void;
     disabled?: boolean;
-    setValue?: UseFormSetValue<T>;
+    setValue: UseFormSetValue<T>;
 }
 /**
  * A functional React component utilized to render the `Input` component. Utilizes a switch statement

package/dist/index.d.ts

@@ -13,3 +13,4 @@ export * from './components/tabs';
 export * from './components/text';
 export * from './theme/provider';
 export * from './components/form/utils/formErrors';
+export * from './theme/foundations/colors';

package/dist/theme/components/form-error.d.ts

@@ -3,6 +3,8 @@ declare const _default: {
     baseStyle: () => {
         text: {
             color: string;
+            position: string;
+            bottom: number;
             mt: number;
             ml: number;
             fontSize: string;

package/dist/theme/components/form.d.ts

@@ -6,9 +6,11 @@ declare const _default: {
             color: string;
         };
         helperText: {
+            position: string;
             color: string;
             mt: number;
             ml: number;
+            bottom: number;
             fontSize: string;
         };
     };

package/dist/theme/components/table.d.ts

@@ -1,6 +1,9 @@
 declare const _default: {
     parts: string[];
     baseStyle: {
+        thead: {
+            bg: string;
+        };
         th: {
             height: string;
             width: string;
@@ -15,7 +18,7 @@ declare const _default: {
             height: string;
             borderRadius: string;
             _odd: {
-                background: string;
+                bg: string;
             };
         };
         td: {

package/dist/theme/foundations/colors.d.ts

@@ -10,7 +10,7 @@ export interface ColorHues {
     800: string;
     900: string;
 }
-declare const colors: {
+export declare const colors: {
     label: {
         primary: {
             light: string;

package/dist/ui-core.cjs.development.js

@@ -8,19 +8,18 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var react = require('@chakra-ui/react');
 var reactHookForm = require('react-hook-form');
-var colors$1 = _interopDefault(require('src/theme/foundations/colors'));
 var icons = require('@chakra-ui/icons');
 var hi = require('react-icons/hi');
 var themeTools = require('@chakra-ui/theme-tools');
 var system = require('@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>";
+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%)',
@@ -328,7 +327,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
@@ -496,7 +495,7 @@ var StackedRadioGroup = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   })));
 });
 
-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
@@ -508,14 +507,14 @@ var Dropdown = function Dropdown(_ref) {
   var DropdownContent = React.useMemo(function () {
     return options.map(function (option, idx) {
       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(react.Box, {
-        color: colors$1.label.secondary.light,
+        color: colors.label.secondary.light,
         fontSize: "13px",
         fontWeight: "bold",
         px: "8px"
       }, idx > 0 && /*#__PURE__*/React__default.createElement(react.Box, {
         my: "3px",
         borderTop: "2px solid",
-        borderColor: colors$1.border["default"]
+        borderColor: colors.border["default"]
       }), option.label), option.value !== 'section_header' && /*#__PURE__*/React__default.createElement(react.Box, {
         cursor: "pointer",
         borderRadius: "inherit",
@@ -526,17 +525,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__default.createElement(react.Box, {
-    bg: colors$1.fill.light.quaternary,
+    bg: colors.fill.light.quaternary,
     backdropFilter: "blur(64px)",
     borderRadius: "4px",
     mt: "3px",
@@ -550,16 +549,27 @@ var Dropdown = function Dropdown(_ref) {
   }, DropdownContent);
 };
 
-var _excluded$1 = ["isRequired", "options", "name", "setValue", "onChange"];
+var useDidMountEffect = function useDidMountEffect(func, deps) {
+  var didMount = React.useRef(false);
+  React.useEffect(function () {
+    if (didMount.current) func();else didMount.current = true; // eslint-disable-next-line
+  }, deps);
+};
+
+var _excluded$1 = ["isRequired", "options", "name", "setValue", "handleOnChange", "value"];
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
 
 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,
+      value = _ref2.value,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
   var dropdownRef = React.useRef(null);
@@ -568,10 +578,19 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
       isFocussed = _useState[0],
       setIsFocussed = _useState[1];
 
-  var _useState2 = React.useState(''),
+  var _useState2 = React.useState((_options$find$label = (_options$find = options.find(function (option) {
+    return option.value === value;
+  })) == null ? void 0 : _options$find.label) != null ? _options$find$label : ''),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
 
+  useDidMountEffect(function () {
+    var _options$find$label2, _options$find2;
+
+    setSelectedOption((_options$find$label2 = (_options$find2 = options.find(function (option) {
+      return option.value === value;
+    })) == null ? void 0 : _options$find2.label) != null ? _options$find$label2 : '');
+  }, [value]);
   react.useOutsideClick({
     ref: dropdownRef,
     handler: function handler() {
@@ -580,6 +599,10 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   });
 
   var handleOnSelectItem = function handleOnSelectItem(option) {
+    if (handleOnChange) {
+      handleOnChange(option.value);
+    }
+
     setValue(name, option.value);
     setSelectedOption(option.label);
     setIsFocussed(false);
@@ -629,7 +652,7 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
   }, 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,
@@ -639,12 +662,12 @@ var Token = function Token(_ref) {
     borderRadius: "full",
     backgroundColor: "#7676801F",
     alignItems: "center",
-    width: "fit-content",
+    // width="100%"
     pl: "8px",
     pr: "4px",
     py: "2px"
   }, /*#__PURE__*/React__default.createElement(react.Text, {
-    color: colors$1.label.primary.light,
+    color: colors.label.primary.light,
     fontSize: "13px"
   }, label), /*#__PURE__*/React__default.createElement(react.Image, {
     pl: "4px",
@@ -957,7 +980,14 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
   }, /*#__PURE__*/React__default.createElement(react.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__default.createElement(react.Box, {
       mr: "4px",
@@ -965,7 +995,9 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       borderRadius: "full",
       onClick: function onClick() {
         return setTokenIndex(index);
-      }
+      },
+      // width="fit-content"
+      width: "100%"
     }, /*#__PURE__*/React__default.createElement(Token, {
       label: label,
       onDelete: function onDelete(e) {
@@ -1009,7 +1041,6 @@ 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__default.createElement(react.Switch, {
     size: "lg",
     ref: _ref,
@@ -1058,7 +1089,8 @@ function Input(_ref) {
       disabled = _ref.disabled,
       onChange = _ref.onChange,
       setValue = _ref.setValue;
-  var selectedInputField = React.useCallback(function (onChange, onBlur, ref, value) {
+
+  var selectedInputField = function selectedInputField(onChange, onBlur, ref, value) {
     switch (inputType) {
       case 'text':
         return /*#__PURE__*/React__default.createElement(StackedInput, {
@@ -1082,7 +1114,6 @@ function Input(_ref) {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           options: options,
           onChange: onChange,
@@ -1100,13 +1131,14 @@ function Input(_ref) {
           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
         });
 
@@ -1116,7 +1148,6 @@ function Input(_ref) {
           name: name,
           id: name,
           maxLength: maxLength,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           onChange: onChange,
           onBlur: onBlur,
@@ -1130,7 +1161,6 @@ function Input(_ref) {
           className: "input-" + inputType + " " + (className != null ? className : ''),
           name: name,
           id: name,
-          isRequired: isRequired,
           isInvalid: isInvalid,
           options: options,
           onChange: onChange,
@@ -1188,7 +1218,8 @@ function Input(_ref) {
       default:
         return null;
     }
-  }, [ariaLabel, className, control, disabled, inputType, isInvalid, isRequired, maxLength, name, options, placeholder, setValue]);
+  };
+
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -1196,6 +1227,8 @@ function Input(_ref) {
     rules: {
       required: isRequired
     },
+
+    /** @ts-ignore: issues with implicit */
     render: function render(_ref2) {
       var _ref2$field = _ref2.field,
           onBlur = _ref2$field.onBlur,
@@ -1206,7 +1239,7 @@ function Input(_ref) {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
-        py: label ? 6 : 0
+        py: label || helperText || isInvalid ? 6 : 0
       }, label && /*#__PURE__*/React__default.createElement(Label$1, {
         label: label,
         isRequired: isRequired
@@ -1258,7 +1291,8 @@ function FormSection(_ref) {
       isRequired: isRequired,
       maxLength: maxLength,
       isInvalid: !!form.formState.errors[name],
-      defaultValue: defaultValue
+      defaultValue: defaultValue,
+      setValue: form.setValue
     });
   }));
 }
@@ -1506,7 +1540,11 @@ function Table(_ref) {
     borderTopRightRadius: borderTopRadius ? 'md' : 0
   }, /*#__PURE__*/React__default.createElement(react.Table, {
     variant: "unstyled"
-  }, /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, null, columnsAsConst.map(function (column) {
+  }, /*#__PURE__*/React__default.createElement(react.Thead, null, /*#__PURE__*/React__default.createElement(react.Tr, {
+    _odd: {
+      bg: colors.label.primary.dark
+    }
+  }, columnsAsConst.map(function (column) {
     return (
       /*#__PURE__*/
       // @ts-ignore
@@ -1822,9 +1860,11 @@ function baseStyleRequiredIndicator() {
 
 function baseStyleHelperText() {
   return {
+    position: 'absolute',
     color: colors.label.secondary.light,
     mt: 1,
     ml: 1,
+    bottom: 0,
     fontSize: '13px'
   };
 }
@@ -1846,6 +1886,8 @@ var parts$2 = ['text', 'icon'];
 function baseStyleText() {
   return {
     color: colors.label.error,
+    position: 'absolute',
+    bottom: 0,
     mt: 1,
     ml: 1,
     fontSize: '13px'
@@ -2363,10 +2405,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'
@@ -2376,10 +2421,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: {
@@ -2744,10 +2789,12 @@ var customXQChakraTheme = /*#__PURE__*/react.extendTheme( /*#__PURE__*/_extends(
  */
 
 var XQThemeProvider = function XQThemeProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      cssVarsRoot = _ref.cssVarsRoot;
   return /*#__PURE__*/React__default.createElement(react.ChakraProvider, {
     theme: customXQChakraTheme,
-    resetCSS: true
+    resetCSS: true,
+    cssVarsRoot: cssVarsRoot
   }, children);
 };
 
@@ -2791,5 +2838,6 @@ exports.Table = Table;
 exports.TabsWrapper = TabsWrapper;
 exports.Text = Text;
 exports.XQThemeProvider = XQThemeProvider;
+exports.colors = colors;
 exports.formatErrorResponse = formatErrorResponse;
 //# sourceMappingURL=ui-core.cjs.development.js.map