@hexure/ui 1.11.0 → 1.11.2

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';
@@ -465,6 +465,145 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
 };
 
 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;
@@ -473,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;
@@ -534,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,
@@ -547,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);
@@ -588,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;
 `;
@@ -609,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;
@@ -629,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;
@@ -647,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 `
@@ -698,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')};
@@ -719,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;
@@ -747,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 &&
@@ -920,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;
@@ -961,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;
@@ -978,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;
@@ -1020,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),
@@ -1032,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;
@@ -1045,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;
 
@@ -1056,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 `
@@ -1100,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;
@@ -1123,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;
@@ -1233,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)));
 };
@@ -1503,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')};
@@ -1517,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 `
@@ -1607,7 +1746,7 @@ const ProgressBar = ({ steps }) => {
     })));
 };
 
-const Wrapper$7 = styled.div `
+const Wrapper$6 = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -1687,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,
@@ -1708,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'};
 `;
@@ -1780,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(', ')
@@ -1791,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;
@@ -2160,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, AppHeader, 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