@hexure/ui 1.8.17 → 1.9.0

package/README.md

@@ -15,6 +15,11 @@ InsTech UI is the source repository for the @hexure/ui npm package. This library
    `npm run rollup` to run rollup and generate a dist folder
    `npm run storybook` to run storybook server and see components on storybook.
    `npm run test` to run all test cases.
+5. Optional: Applying a custom theme:
+  1. Import the `ThemeProvider` from styled-components: `import { ThemeProvider } from 'styled-components'`
+  2. Wrap your top level application with the ThemeProvider: `<ThemeProvider><YourApp /></ThemeProvider>`
+  3. Define your custom theme on the provider: `<ThemeProvider theme={{ PRIMARY_COLOR: { Hex: 'Blue', Rgb: '10,10,10' } }}><YourApp /></ThemeProvider>`
+  4. As of v1.9.0 the only theme option is `PRIMARY_COLOR` and it must be an object with `Hex` and `Rbg` values.
 
 
 # Contribute
@@ -81,5 +86,5 @@ You should release a new version of this package immediately after a Pull Reques
 12. Go to the Azure DevOps repo and add a new Tag
     - Tag Name: v1.x.x
     - Description: Add details around what was added/changed
-    
+
 

package/dist/cjs/index.js

@@ -2016,6 +2016,9 @@ const FontStyles = {
 const FontSizes = {
     DEFAULT: '14px',
     SMALL: '13px',
+};
+const EditableTheme = {
+    PRIMARY_COLOR: Colors.PRIMARY,
 };
 
 const Header$3 = styled.div `
@@ -2046,36 +2049,6 @@ const Accordion = (_a) => {
         open ? children : null));
 };
 
-const button_type_mapping = {
-    primary: {
-        background_color: Colors.PRIMARY.Hex,
-        border_color: Colors.PRIMARY.Hex,
-        content_color: '#fff',
-        badge_bg_color: '#fff',
-        badge_content_color: Colors.PRIMARY.Hex,
-    },
-    secondary: {
-        background_color: 'transparent',
-        border_color: Colors.PRIMARY.Hex,
-        content_color: Colors.PRIMARY.Hex,
-        badge_bg_color: Colors.PRIMARY.Hex,
-        badge_content_color: '#fff',
-    },
-    red: {
-        background_color: Colors.RED.Hex,
-        border_color: Colors.RED.Hex,
-        content_color: '#fff',
-        badge_bg_color: '#fff',
-        badge_content_color: Colors.RED.Hex,
-    },
-    green: {
-        background_color: Colors.GREEN.Hex,
-        border_color: Colors.GREEN.Hex,
-        content_color: '#fff',
-        badge_bg_color: '#fff',
-        badge_content_color: Colors.GREEN.Hex,
-    },
-};
 const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
   line-height: 1em;
@@ -2093,7 +2066,7 @@ const StyledButton = styled.button `
     return '0px';
 }};
   outline: none;
-  background: ${props => props.$format ? button_type_mapping[props.$format].background_color : Colors.PRIMARY.Hex};
+  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
   width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
@@ -2110,20 +2083,20 @@ const StyledButton = styled.button `
   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};
+  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
   box-sizing: border-box;
   &:hover {
     opacity: ${props => (props.$disabled ? 0.6 : 1)};
   }
 `;
 const Label$5 = styled.span `
-  color: ${props => (props.$format ? button_type_mapping[props.$format].content_color : '#fff')};
+  color: ${props => props.$content_color || '#fff'};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
   font-family: ${FontStyles.DEFAULT};
   font-weight: 500;
   line-height: 1;
 `;
-const StyledIcon$4 = styled.span `
+const StyledIcon$6 = styled.span `
   margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
   margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
   display: flex;
@@ -2138,8 +2111,8 @@ const Badge$1 = styled.span `
   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};
+  background-color: ${props => props.$bg_color || '#fff'};
+  color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
   font-size: ${props => (props.$small ? '10px' : '12px')};
   font-weight: 600;
   font-family: ${FontStyles.DEFAULT};
@@ -2149,12 +2122,44 @@ const Badge$1 = styled.span `
 `;
 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 theme = React.useContext(Me) || EditableTheme;
     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$5, { "$format": format, "$small": small }, children)) : null,
-        icon && !badge ? (React.createElement(StyledIcon$4, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
-        badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
+    const button_type_mapping = {
+        primary: {
+            background_color: theme.PRIMARY_COLOR.Hex,
+            border_color: theme.PRIMARY_COLOR.Hex,
+            content_color: '#fff',
+            badge_bg_color: '#fff',
+            badge_content_color: theme.PRIMARY_COLOR.Hex,
+        },
+        secondary: {
+            background_color: 'transparent',
+            border_color: theme.PRIMARY_COLOR.Hex,
+            content_color: theme.PRIMARY_COLOR.Hex,
+            badge_bg_color: theme.PRIMARY_COLOR.Hex,
+            badge_content_color: '#fff',
+        },
+        red: {
+            background_color: Colors.RED.Hex,
+            border_color: Colors.RED.Hex,
+            content_color: '#fff',
+            badge_bg_color: '#fff',
+            badge_content_color: Colors.RED.Hex,
+        },
+        green: {
+            background_color: Colors.GREEN.Hex,
+            border_color: Colors.GREEN.Hex,
+            content_color: '#fff',
+            badge_bg_color: '#fff',
+            badge_content_color: Colors.GREEN.Hex,
+        },
+    };
+    const format_styles = button_type_mapping[format];
+    return (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
+        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small }, children)) : null,
+        icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
+            React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
+        badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
 };
 
 const StyledComponent = styled.p `
@@ -2284,22 +2289,24 @@ const Wrapper$h = styled.div `
   padding: ${({ $small }) => ($small ? '11px' : '20px')};
   box-sizing: border-box;
 `;
-const StyledIcon$3 = styled(Icon) `
+const StyledIcon$5 = styled(Icon) `
   flex-shrink: 0;
 `;
 const Action$1 = styled.div `
-  color: ${Colors.PRIMARY.Hex};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
   font-size: ${FontSizes.DEFAULT};
   font-family: ${FontStyles.DEFAULT};
   font-weight: 500;
   cursor: pointer;
   margin-top: 6px;
 `;
+Action$1.defaultProps = { theme: EditableTheme };
 const Alert = (_a) => {
     var { action, type = 'info', title, description, small = false } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small"]);
+    const theme = React.useContext(Me) || EditableTheme;
     const type_mapping = {
         info: {
-            color: Colors.PRIMARY.Hex,
+            color: theme.PRIMARY_COLOR.Hex,
             icon: js.mdiInformationOutline,
         },
         error: {
@@ -2316,7 +2323,7 @@ const Alert = (_a) => {
         },
     };
     return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
-        React.createElement(StyledIcon$3, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
+        React.createElement(StyledIcon$5, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
         React.createElement("div", null,
             title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
@@ -2324,7 +2331,7 @@ const Alert = (_a) => {
 };
 
 const Wrapper$g = styled.div `
-  border: 1px solid ${Colors.PRIMARY.Hex};
+  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -2332,6 +2339,7 @@ const Wrapper$g = styled.div `
   justify-content: space-between;
   padding: 16px 20px;
 `;
+Wrapper$g.defaultProps = { theme: EditableTheme };
 const Left = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -2356,13 +2364,14 @@ const Clear = styled.span `
   font-size: 14px;
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.PRIMARY.Hex};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
   line-height: 1;
   cursor: pointer;
   padding-left: 10px;
   margin-left: 10px;
   border-left: 1px solid #ccc;
 `;
+Clear.defaultProps = { theme: EditableTheme };
 const Actions$1 = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -2429,10 +2438,11 @@ const MenuItem = styled.div `
 
     svg,
     path {
-      fill: ${Colors.PRIMARY.Hex} !important;
+      fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
     }
   }
 `;
+MenuItem.defaultProps = { theme: EditableTheme };
 const Title$1 = styled.span `
   font-family: Roboto;
   font-size: 14px;
@@ -2962,12 +2972,15 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
         setDayOptions(Array.from({ length: dDate.daysInMonth() }, (_, i) => ({
             value: i + 1,
         })));
-        // Mimicing browser event structure
-        onChange({
-            target: {
-                value: dDate.format('YYYY-MM-DD'),
-            },
-        });
+        // Only fire the onChange event if the date has changed
+        if (dDate.format('YYYY-MM-DD') !== date) {
+            // Copying the browser event structure
+            onChange({
+                target: {
+                    value: dDate.format('YYYY-MM-DD'),
+                },
+            });
+        }
     }, [dDate]);
     const handleDayChange = (e) => {
         const date = parseInt(e.target.value, 10);
@@ -3084,13 +3097,14 @@ const Wrapper$b = styled.div `
   position: relative;
   height: 16px;
 `;
-const StyledIcon$2 = styled(Icon) `
+const StyledIcon$4 = styled(Icon) `
   width: 16px;
   height: 16px;
   padding: 0px 6px;
-  color: ${Colors.PRIMARY.Hex};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
   cursor: pointer;
 `;
+StyledIcon$4.defaultProps = { theme: EditableTheme };
 const positions = {
     'right-top': {
         top: '0px',
@@ -3119,11 +3133,12 @@ const positions = {
         transform: 'translateY(-50%)',
     },
 };
-const Content$3 = 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 Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.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])));
+Content$3.defaultProps = { theme: EditableTheme };
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = React.useState(false);
     return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
-        trigger || React.createElement(StyledIcon$2, { path: js.mdiInformationOutline }),
+        trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
 };
 
@@ -3153,9 +3168,10 @@ const Action = styled.span `
   font-weight: 500;
   line-height: 1em;
   font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.PRIMARY.Hex};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
   cursor: pointer;
 `;
+Action.defaultProps = { theme: EditableTheme };
 const Description = styled.div `
   font-size: ${FontSizes.SMALL};
   font-weight: 400;
@@ -3227,10 +3243,11 @@ 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')};
+  border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
+  background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
   cursor: copy;
 `;
+Dropzone.defaultProps = { theme: EditableTheme };
 const IconWrapper$1 = styled.div `
   width: 80px;
   height: 80px;
@@ -3240,7 +3257,7 @@ const IconWrapper$1 = styled.div `
   align-items: center;
   justify-content: center;
 `;
-const StyledIcon$1 = styled(Icon) `
+const StyledIcon$3 = styled(Icon) `
   width: 40px !important;
   height: 40px !important;
 
@@ -3392,7 +3409,7 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
             }))) : null,
             allowMoreFiles ? (React.createElement(ClickZone, { onClick: triggerFileExplorer },
                 files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging },
-                    React.createElement(StyledIcon$1, { path: js.mdiFolderPlusOutline }))),
+                    React.createElement(StyledIcon$3, { path: js.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)));
@@ -3426,11 +3443,8 @@ const formatAsSsn = (number) => {
 };
 
 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')};
+  border: none !important;
+  background: none !important;
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
@@ -3448,22 +3462,19 @@ const StyledInput = styled.input `
   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;
+  border-radius: 0px 4px 4px 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   height: auto;
   background: #f5f5f5;
-  border-width: 1px 1px 1px 0px;
+  border-width: 0px 0px 0px 1px;
   border-style: solid;
   border-color: #cccccc;
-  border-radius: 0px 4px 4px 0px;
   font-family: ${FontStyles.DEFAULT};
   font-style: normal;
   font-weight: 400;
@@ -3473,7 +3484,18 @@ const StyledSuffix = styled.div `
 const StyledWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
+StyledWrapper.defaultProps = { theme: EditableTheme };
 const StyledTextarea = styled.textarea `
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
   border-radius: 4px;
@@ -3499,11 +3521,56 @@ const StyledTextarea = styled.textarea `
   display: block;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
   &:focus {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex)};
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
   }
 `;
+StyledTextarea.defaultProps = { theme: EditableTheme };
+const SuggestedValues = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: 39px;
+  z-index: 10;
+  max-height: 220px;
+  overflow: auto;
+`;
+SuggestedValues.defaultProps = { theme: EditableTheme };
+const SuggestedSummary = styled.div `
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 18px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  z-index: 1;
+  position: sticky;
+  top: 0px;
+`;
+const SuggestedValue = styled.div `
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+
+  &:hover {
+    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
+  }
+`;
+SuggestedValue.defaultProps = { theme: EditableTheme };
 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"]);
+    var { format, suffix, height, invalid, max, maxLength, min, onBlur, onChange, onKeyDown, onSuggestedSelect, placeholder, readOnly, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "step", "style", "suggestedValues", "type", "value"]);
     const handleInputChange = (e) => {
         if (format === 'currency' || format === 'currency_decimal') {
             e.target.value = e.target.value.replace(/[^0-9.]/g, '');
@@ -3542,13 +3609,27 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(value);
     }
-    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)));
+    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, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
+        React.createElement(StyledInput, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, 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),
+        (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
+            React.createElement(SuggestedSummary, null,
+                suggestedValues.length,
+                " Results Match \"",
+                value,
+                "\""),
+            suggestedValues.map(s_value => {
+                return (React.createElement(SuggestedValue, { onClick: () => {
+                        handleInputChange({ target: { value: s_value } });
+                        if (onSuggestedSelect) {
+                            onSuggestedSelect();
+                        }
+                    } }, s_value));
+            }))) : null));
 };
 
 const Wrapper$8 = styled.a `
-  color: ${Colors.PRIMARY.Hex};
+  color: ${props => props.theme.PRIMARY_COLOR.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')};
@@ -3561,6 +3642,7 @@ const Wrapper$8 = styled.a `
   box-sizing: border-box;
   cursor: pointer;
 `;
+Wrapper$8.defaultProps = { theme: EditableTheme };
 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));
@@ -3655,11 +3737,17 @@ const Step = styled.div `
   align-items: center;
   gap: 8px;
 `;
+const StyledIcon$2 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
+`;
+StyledIcon$2.defaultProps = { theme: EditableTheme };
 const StepIndicator = styled.div `
   width: 30px;
   height: 30px;
   border-radius: 15px;
-  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
+  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
   color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   font-size: 14px;
@@ -3670,6 +3758,7 @@ const StepIndicator = styled.div `
   justify-content: center;
   flex-shrink: 0;
 `;
+StepIndicator.defaultProps = { theme: EditableTheme };
 const StepLabel = styled.div `
   color: #000;
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
@@ -3680,7 +3769,7 @@ const StepLabel = styled.div `
 const ProgressBar = ({ steps }) => {
     return (React.createElement(Steps, null, steps.map((step, i) => {
         return (React.createElement(Step, { key: i },
-            step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
+            step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
             React.createElement(StepLabel, null, step.label)));
     })));
 };
@@ -3802,7 +3891,7 @@ const Trigger = styled.div `
         return Colors.RED.Hex;
     }
     else if (props.$showOptions) {
-        return Colors.PRIMARY.Hex;
+        return props.theme.PRIMARY_COLOR.Hex;
     }
     else {
         return '#cccccc';
@@ -3816,6 +3905,7 @@ const Trigger = styled.div `
   justify-content: space-between;
   z-index: 1;
 `;
+Trigger.defaultProps = { theme: EditableTheme };
 const Value = styled.div `
   color: ${Colors.BLACK.Hex};
   font-family: ${FontStyles.DEFAULT};
@@ -3830,7 +3920,7 @@ const Value = styled.div `
 const Options = styled.div `
   background: #fff;
   box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${Colors.PRIMARY.Hex};
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 0px 0px 4px 4px;
   border-style: solid;
   border-top: none;
@@ -3842,6 +3932,7 @@ const Options = styled.div `
   max-height: 220px;
   overflow: auto;
 `;
+Options.defaultProps = { theme: EditableTheme };
 const Scrim = styled.div `
   bottom: 0;
   left: 0;
@@ -4047,17 +4138,19 @@ const Header = styled.th `
   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)};
+  color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
 `;
+Header.defaultProps = { theme: EditableTheme };
 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};
+    background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
   }
 `;
+Row.defaultProps = { theme: EditableTheme };
 const Column = styled.td `
   padding: 16px 12px !important;
   font-size: ${FontSizes.DEFAULT} !important;
@@ -4075,6 +4168,12 @@ const IconWrapper = styled.span `
   transform: translateY(-50%);
   margin-left: 2px;
 `;
+const StyledIcon$1 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
+`;
+StyledIcon$1.defaultProps = { theme: EditableTheme };
 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),
@@ -4083,7 +4182,7 @@ const Table = (_a) => {
                 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' ? js.mdiChevronUp : js.mdiChevronDown, size: '20px' }))) : null));
+                        React.createElement(StyledIcon$1, { path: sortDirection === 'asc' ? js.mdiChevronUp : js.mdiChevronDown, size: '20px' }))) : null));
             })))),
         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) => {
@@ -4116,14 +4215,15 @@ const Tab = styled.div `
   margin: 0 0 -1px 0;
   border-bottom-width: 4px;
   border-bottom-style: solid;
-  border-bottom-color: ${props => (props.$isActive ? Colors.PRIMARY.Hex : 'transparent')};
+  border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
   cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
   box-sizing: border-box;
   &:hover {
-    color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.PRIMARY.Hex)};
+    color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
     font-weight: 500;
   }
 `;
+Tab.defaultProps = { theme: EditableTheme };
 const Badge = styled.div `
   display: flex;
   width: 18px;
@@ -4131,7 +4231,7 @@ const Badge = styled.div `
   justify-content: center;
   align-items: center;
   border-radius: 9px;
-  background: ${props => (props.$isError ? Colors.RED.Hex : Colors.PRIMARY.Hex)};
+  background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
   color: #fff;
   font-family: ${FontStyles.DEFAULT};
   font-size: 12px;
@@ -4139,6 +4239,7 @@ const Badge = styled.div `
   line-height: 1;
   letter-spacing: 1px;
 `;
+Badge.defaultProps = { theme: EditableTheme };
 const Tabs = (_a) => {
     var { tabs } = _a, accessibleProps = __rest(_a, ["tabs"]);
     return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps), tabs.map((_a, i) => {