@hexure/ui 1.10.1 → 1.11.1

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect, useRef } from 'react';
 import styled, { ThemeContext, keyframes } from 'styled-components';
 import Icon, { Icon as Icon$1 } from '@mdi/react';
-import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiDotsHorizontal, mdiClose, mdiMinusCircle, mdiFolderPlusOutline, mdiChevronRight, mdiChevronLeft, mdiCheck } from '@mdi/js';
+import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
 import dayjs from 'dayjs';
 import Numeral from 'numeral';
 import Moment from 'moment';
@@ -308,7 +308,7 @@ const Wrapper$i = styled.div `
   justify-content: center;
   box-sizing: border-box;
 `;
-const Container$3 = styled.dialog `
+const Container$4 = styled.dialog `
   max-width: 600px;
   width: auto;
   border-radius: 8px;
@@ -321,7 +321,7 @@ const Container$3 = styled.dialog `
   text-align: center;
   box-sizing: border-box;
 `;
-const Buttons = styled.div `
+const Buttons$1 = styled.div `
   display: flex;
   gap: 10px;
   align-items: center;
@@ -332,10 +332,10 @@ const Buttons = styled.div `
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
     return (React.createElement(Wrapper$i, Object.assign({}, accessibleProps),
-        React.createElement(Container$3, { open: true },
+        React.createElement(Container$4, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons, null,
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, null,
                 tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
@@ -393,7 +393,217 @@ const Alert = (_a) => {
             action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
 
+const colorMapping = {
+    black: {
+        fill_1: '#000000',
+        fill_2: '#000000',
+        fill_3: '#000000',
+    },
+    white: {
+        fill_1: '#ffffff',
+        fill_2: '#ffffff',
+        fill_3: '#ffffff',
+    },
+    full: {
+        fill_1: '#000000',
+        fill_2: '#E82425',
+        fill_3: '#E82425',
+    },
+    reversed: {
+        fill_1: '#ffffff',
+        fill_2: '#E82425',
+        fill_3: '#E82425',
+    },
+};
+const Logo = (_a) => {
+    var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
+    const type_parts = type.split('_');
+    switch (type_parts[0]) {
+        case 'mark':
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1] })));
+        default:
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
+                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3 }),
+                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', fill: colorMapping[type_parts[1]].fill_2 }),
+                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
+    }
+};
+
+const Container$3 = styled.header `
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  background: '#fff';
+  justify-content: space-between;
+`;
+const LogoWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Image = styled.img `
+  height: 30px !important;
+  width: auto !important;
+`;
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  flex-direction: reverse;
+`;
+const AppHeader = ({ logoUrl, buttons = [] }) => {
+    return (React.createElement(Container$3, null,
+        React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
+        React.createElement(Buttons, null, buttons.map(b => (React.createElement(Button, Object.assign({}, b)))))));
+};
+
 const Wrapper$g = styled.div `
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: ${props => Colors[props.$color].Hex};
+  color: #ffffff;
+  box-sizing: border-box;
+  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+`;
+const Content$3 = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Label$4 = styled.div `
+  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
+  font-size: ${FontSizes.SMALL};
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.2em;
+`;
+const Remove$1 = styled.div `
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+`;
+const Tag = (_a) => {
+    var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
+    return (React.createElement(Wrapper$g, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
+        React.createElement(Content$3, null,
+            React.createElement(Label$4, { "$color": color }, children),
+            removable ? (React.createElement(Remove$1, null,
+                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
+};
+
+const SidebarContainer = styled.div `
+  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0px;
+  width: ${props => (props.$isOpen ? '280px' : '60px')};
+`;
+const MenuWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
+  cursor: pointer;
+  height: 40px;
+
+  &:hover > div {
+    color: ${props => props.$color.Hex};
+  }
+
+  &:hover > svg > path {
+    fill: ${Colors.BLACK.Hex} !important;
+  }
+`;
+const MenuIcon = styled(Icon) `
+  width: 20px;
+  height: 20px;
+  margin: 0px 16px;
+  flex-shrink: 0;
+
+  > path {
+    fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
+  }
+`;
+const MenuLabel = styled.div `
+  color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
+  flex: 1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 16px;
+  padding: 12px 0px;
+  letter-spacing: 1px;
+`;
+const SubMenu = styled.div `
+  overflow-y: auto;
+  padding-left: 44px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+`;
+const SubMenuItem = styled.a `
+  display: block;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 20px;
+  text-decoration: none;
+  font-weight: ${({ $active }) => ($active ? '500' : '400')};
+  color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
+  background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
+  cursor: pointer;
+
+  &:hover {
+    color: ${props => props.$color.Hex};
+    font-weight: 500;
+  }
+`;
+const Footer = styled.div `
+  padding: 20px 14px 0px;
+  display: flex;
+  align-items: center;
+`;
+const FooterInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+`;
+const SidebarMenuContainer = styled.div `
+  flex-grow: 1;
+`;
+const AppMenu = ({ menu, isCollapsed, footerTag }) => {
+    const theme = useContext(ThemeContext) || EditableTheme;
+    const [collapsed, toggleCollapse] = useState(isCollapsed);
+    return (React.createElement(SidebarContainer, { "$isOpen": !collapsed },
+        React.createElement(SidebarMenuContainer, null, menu.map(nav_item => {
+            return (React.createElement(React.Fragment, { key: nav_item.label },
+                React.createElement(MenuWrapper, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, onClick: nav_item.onClick },
+                    React.createElement(MenuIcon, { "$active": !!nav_item.is_active, path: nav_item.icon }),
+                    collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR }, nav_item.label))),
+                nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, null, nav_item.menu.map(menu_item => (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, key: menu_item.label, onClick: menu_item.onClick }, menu_item.label))))) : null));
+        })),
+        React.createElement(Footer, null,
+            collapsed ? null : (React.createElement(FooterInfo, null,
+                footerTag ? React.createElement(Tag, null, footerTag) : null,
+                React.createElement(Copy, { margin: '8px 0 0 0', type: 'small' },
+                    "\u00A9 ",
+                    new Date().getFullYear(),
+                    " Hexure"))),
+            React.createElement(Button, { icon: collapsed ? mdiChevronRight : mdiChevronLeft, onClick: () => toggleCollapse(!collapsed), small: true }))));
+};
+
+const Wrapper$f = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -402,7 +612,7 @@ const Wrapper$g = styled.div `
   justify-content: space-between;
   padding: 16px 20px;
 `;
-Wrapper$g.defaultProps = { theme: EditableTheme };
+Wrapper$f.defaultProps = { theme: EditableTheme };
 const Left = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -463,7 +673,7 @@ const ErrorMsg = styled.span `
 `;
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
             React.createElement(Info$1, null,
                 React.createElement(Selected, null,
@@ -476,7 +686,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$e = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -517,14 +727,14 @@ const Title$1 = styled.span `
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$f, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
         return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
             item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, null, item.label)));
     })));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$d = styled.div `
   position: relative;
   display: inline-block;
 `;
@@ -538,12 +748,12 @@ const StyledMoreMenu = styled(MoreMenu) `
 `;
 const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
     const [show_menu, toggleMenu] = useState(false);
-    return (React.createElement(Wrapper$e, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
+    return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
         React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
         show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
 };
 
-const Wrapper$d = styled.label `
+const Wrapper$c = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
   margin-left: -6px;
@@ -558,14 +768,14 @@ const Wrapper$d = styled.label `
     background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
   }
 `;
-Wrapper$d.defaultProps = { theme: EditableTheme };
+Wrapper$c.defaultProps = { theme: EditableTheme };
 const Input$2 = styled.input `
   font-size: 20px;
   margin: 5px 0px 0px 0px;
   line-height: 1.1em;
   box-sizing: border-box;
 `;
-const Label$4 = styled.span `
+const Label$3 = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -576,9 +786,9 @@ const Label$4 = styled.span `
 `;
 const Checkbox = (_a) => {
     var { children, disabled, checked, onChange } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$c, Object.assign({}, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
-        children ? React.createElement(Label$4, null, children) : null));
+        children ? React.createElement(Label$3, null, children) : null));
 };
 
 const SelectAll = styled.div `
@@ -627,7 +837,7 @@ const Checklist = (_a) => {
         }))));
 };
 
-const Wrapper$c = styled.div `
+const Wrapper$b = styled.div `
   border-radius: 4px;
   height: 40px;
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
@@ -648,7 +858,7 @@ const Wrapper$c = styled.div `
     border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
   }
 `;
-Wrapper$c.defaultProps = { theme: EditableTheme };
+Wrapper$b.defaultProps = { theme: EditableTheme };
 const Trigger$1 = styled.select `
   appearance: none;
   box-shadow: none;
@@ -676,7 +886,7 @@ const IconWrapper$2 = styled(Icon) `
 `;
 const Select = (_a) => {
     var { options, optionGroups, placeholder, readOnly, invalid, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
-    return (React.createElement(Wrapper$c, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
+    return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
         React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
             placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
             optionGroups &&
@@ -849,7 +1059,7 @@ const Drawer = (_a) => {
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 
-const Wrapper$b = styled.div `
+const Wrapper$a = styled.div `
   display: inline-block;
   position: relative;
   height: 16px;
@@ -890,16 +1100,16 @@ const positions = {
         transform: 'translateY(-50%)',
     },
 };
-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 Content$2 = 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$2.defaultProps = { theme: EditableTheme };
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = useState(false);
-    return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+    return (React.createElement(Wrapper$a, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
-        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
+        show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
 };
 
-const Wrapper$a = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
+const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
 const LabelRow = styled.div `
   display: flex;
   align-items: center;
@@ -907,7 +1117,7 @@ const LabelRow = styled.div `
   margin: 0 0 4px 0;
   box-sizing: border-box;
 `;
-const Label$3 = styled.label `
+const Label$2 = styled.label `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 500;
   line-height: 1em;
@@ -949,9 +1159,9 @@ const Validation = styled.div `
 `;
 const Field = (_a) => {
     var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
-    return (React.createElement(Wrapper$a, Object.assign({ style: style }, accessibleProps),
+    return (React.createElement(Wrapper$9, Object.assign({ style: style }, accessibleProps),
         React.createElement(LabelRow, null,
-            React.createElement(Label$3, { htmlFor: htmlFor },
+            React.createElement(Label$2, { htmlFor: htmlFor },
                 label,
                 required ? React.createElement(Required, null, "*") : null,
                 tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
@@ -961,7 +1171,7 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, null, validationText) : null));
 };
 
-const Wrapper$9 = styled.fieldset `
+const Wrapper$8 = styled.fieldset `
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-block-start: 0px;
@@ -974,7 +1184,7 @@ const Wrapper$9 = styled.fieldset `
   border-color: transparent;
   border-image: none;
 `;
-const Label$2 = styled.legend `
+const Label$1 = styled.legend `
   padding-inline-start: 0px;
   padding-inline-end: 0px;
 
@@ -985,15 +1195,15 @@ const Label$2 = styled.legend `
   line-height: 22px;
   margin-bottom: 6px;
 `;
-const Content$2 = styled.div `
+const Content$1 = styled.div `
   padding: 20px;
   border-radius: 8px;
   background: #fcfcfc;
 `;
 const FieldGroup = ({ children, label }) => {
-    return (React.createElement(Wrapper$9, null,
-        React.createElement(Label$2, null, label),
-        React.createElement(Content$2, null, children)));
+    return (React.createElement(Wrapper$8, null,
+        React.createElement(Label$1, null, label),
+        React.createElement(Content$1, null, children)));
 };
 
 const Dropzone = styled.div `
@@ -1029,7 +1239,7 @@ const ClickZone = styled.div `
   align-items: center;
   gap: 16px;
 `;
-const Content$1 = styled.div `
+const Content = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1052,7 +1262,7 @@ const File = styled.div `
   border: 1px solid #cccccc;
   background: #ffffff;
 `;
-const Remove$1 = styled(Icon) `
+const Remove = styled(Icon) `
   width: 24px;
   height: 24px;
   cursor: pointer;
@@ -1162,12 +1372,12 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
             files.length ? (React.createElement(Files, null, files.map(file => {
                 return (React.createElement(File, { key: file.name },
                     React.createElement(Copy, { type: 'bold' }, file.name),
-                    React.createElement(Remove$1, { onClick: handleRemove.bind(null, file), path: mdiMinusCircle })));
+                    React.createElement(Remove, { onClick: handleRemove.bind(null, file), path: mdiMinusCircle })));
             }))) : null,
             allowMoreFiles ? (React.createElement(ClickZone, { onClick: triggerFileExplorer },
                 files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging },
                     React.createElement(StyledIcon$3, { path: mdiFolderPlusOutline }))),
-                React.createElement(Content$1, null,
+                React.createElement(Content, 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)));
 };
@@ -1432,7 +1642,7 @@ const Input$1 = (_a) => {
             }))) : null));
 };
 
-const Wrapper$8 = styled.a `
+const Wrapper$7 = styled.a `
   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')};
@@ -1446,10 +1656,10 @@ const Wrapper$8 = styled.a `
   box-sizing: border-box;
   cursor: pointer;
 `;
-Wrapper$8.defaultProps = { theme: EditableTheme };
+Wrapper$7.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));
+    return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
 };
 
 const dash = keyframes `
@@ -1486,48 +1696,6 @@ const Loader = () => {
         React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
 };
 
-const colorMapping = {
-    black: {
-        fill_1: '#000000',
-        fill_2: '#000000',
-        fill_3: '#000000',
-    },
-    white: {
-        fill_1: '#ffffff',
-        fill_2: '#ffffff',
-        fill_3: '#ffffff',
-    },
-    full: {
-        fill_1: '#000000',
-        fill_2: '#E82425',
-        fill_3: '#E82425',
-    },
-    reversed: {
-        fill_1: '#ffffff',
-        fill_2: '#E82425',
-        fill_3: '#E82425',
-    },
-};
-const Logo = (_a) => {
-    var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
-    const type_parts = type.split('_');
-    switch (type_parts[0]) {
-        case 'mark':
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
-                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1] })));
-        default:
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps),
-                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3 }),
-                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', fill: colorMapping[type_parts[1]].fill_2 }),
-                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
-    }
-};
-
 const Steps = styled.div `
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
@@ -1578,7 +1746,7 @@ const ProgressBar = ({ steps }) => {
     })));
 };
 
-const Wrapper$7 = styled.div `
+const Wrapper$6 = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -1658,7 +1826,7 @@ const Modal = (_a) => {
             document.onkeydown = null;
         };
     }, []);
-    return (React.createElement(Wrapper$7, null,
+    return (React.createElement(Wrapper$6, null,
         React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps),
             React.createElement(Header$1, null,
                 title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
@@ -1679,7 +1847,7 @@ const Modal = (_a) => {
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
 };
 
-const Wrapper$6 = styled.div `
+const Wrapper$5 = styled.div `
   position: relative;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
 `;
@@ -1751,7 +1919,7 @@ const MultiSelect = (_a) => {
     var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
     const [showOptions, setShowOptions] = useState(false);
     const selected_options = options.filter(o => selected.includes(o.value));
-    return (React.createElement(Wrapper$6, { "$style": style },
+    return (React.createElement(Wrapper$5, { "$style": style },
         React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
             React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
                 ? selected_options.map(o => o.label || o.value).join(', ')
@@ -1762,40 +1930,6 @@ const MultiSelect = (_a) => {
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
 };
 
-const Wrapper$5 = styled.div `
-  display: inline-block;
-  border-radius: 4px;
-  padding: 4px 6px;
-  background: ${props => Colors[props.$color].Hex};
-  color: #ffffff;
-  box-sizing: border-box;
-  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
-`;
-const Content = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Label$1 = styled.div `
-  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
-  font-size: ${FontSizes.SMALL};
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.2em;
-`;
-const Remove = styled.div `
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
-`;
-const Tag = (_a) => {
-    var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
-    return (React.createElement(Wrapper$5, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
-        React.createElement(Content, null,
-            React.createElement(Label$1, { "$color": color }, children),
-            removable ? (React.createElement(Remove, null,
-                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
-};
-
 const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
@@ -2131,5 +2265,5 @@ const ZeroState = (_a) => {
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
 };
 
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
+export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
 //# sourceMappingURL=index.js.map