@hexure/ui 1.8.12 → 1.8.14

package/dist/cjs/types/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface FieldGroupProps {
+    /** The label to display above the field group */
+    label: string;
+    /** The content of the field group...usually a set of Field components */
+    children: any;
+}
+declare const FieldGroup: FC<FieldGroupProps>;
+export default FieldGroup;

package/dist/cjs/types/components/FieldGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FieldGroup';

package/dist/cjs/types/components/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
+import { StepProps } from '../ProgressBar/ProgressBar';
 interface ButtonProps {
     disabled?: boolean;
     children: string;
@@ -8,11 +9,6 @@ interface ButtonProps {
     tabIndex?: number;
     loading?: boolean;
 }
-interface StepProps {
-    label: string;
-    complete?: boolean;
-    active?: boolean;
-}
 export interface ModalProps extends AccessibleProps {
     /** Defines a button to be displayed on the far right of the bottom button bar */
     primaryButton?: ButtonProps;

package/dist/cjs/types/components/PageHeader/PageHeader.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { MenuItemProps } from '../MoreMenu/MoreMenu';
+import { TagProps } from '../Tag/Tag';
 export interface PageHeaderProps {
     title?: string;
     breadcrumbs?: Array<{
@@ -21,6 +22,7 @@ export interface PageHeaderProps {
         label: string;
         menuItems: Array<MenuItemProps>;
     };
+    tag?: TagProps;
 }
 declare const PageHeader: FC<PageHeaderProps>;
 export default PageHeader;

package/dist/cjs/types/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export interface StepProps {
+    label: string;
+    complete?: boolean;
+    active?: boolean;
+}
+export interface ProgressBarProps {
+    /**  */
+    steps: StepProps[];
+}
+declare const ProgressBar: FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/cjs/types/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

package/dist/cjs/types/index.d.ts

@@ -10,6 +10,7 @@ export { default as Copy } from './components/Copy';
 export { default as DatePicker } from './components/DatePicker';
 export { default as Drawer } from './components/Drawer';
 export { default as Field } from './components/Field';
+export { default as FieldGroup } from './components/FieldGroup';
 export { default as FileUpload } from './components/FileUpload';
 export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';
@@ -21,6 +22,7 @@ export { default as MoreMenu } from './components/MoreMenu';
 export { default as MultiSelect } from './components/MultiSelect';
 export { default as PageHeader } from './components/PageHeader';
 export { default as Pagination } from './components/Pagination';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as Radio } from './components/Radio';
 export { default as RadioList } from './components/RadioList';
 export { default as Select } from './components/Select';

package/dist/esm/index.js

@@ -2027,7 +2027,7 @@ const Header$3 = styled.div `
   height: 50px;
   cursor: pointer;
 `;
-const Title$1 = styled.div `
+const Title$2 = styled.div `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   color: ${Colors.BLACK.Hex};
@@ -2039,7 +2039,7 @@ const Accordion = (_a) => {
     var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Header$3, Object.assign({ onClick: onClick }, accessibleProps),
-            React.createElement(Title$1, null, title),
+            React.createElement(Title$2, null, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
         open ? children : null));
 };
@@ -2114,7 +2114,7 @@ const StyledButton = styled.button `
     opacity: ${props => (props.$disabled ? 0.6 : 1)};
   }
 `;
-const Label$4 = styled.span `
+const Label$5 = styled.span `
   color: ${props => (props.$format ? button_type_mapping[props.$format].content_color : '#fff')};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
   font-family: ${FontStyles.DEFAULT};
@@ -2149,7 +2149,7 @@ 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 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$4, { "$format": format, "$small": small }, children)) : null,
+        children ? (React.createElement(Label$5, { "$format": format, "$small": small }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
@@ -2225,7 +2225,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$h = styled.div `
+const Wrapper$i = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -2261,7 +2261,7 @@ 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$h, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$i, Object.assign({}, accessibleProps),
         React.createElement(Container$3, { open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -2271,7 +2271,7 @@ const ActionDialog = (_a) => {
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$g = styled.div `
+const Wrapper$h = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -2281,7 +2281,7 @@ const Wrapper$g = styled.div `
   padding: 20px;
   box-sizing: border-box;
 `;
-const Content$3 = styled.div `
+const Content$4 = styled.div `
   margin-left: 20px;
 `;
 const Action$1 = styled.div `
@@ -2312,16 +2312,16 @@ const Alert = (_a) => {
             icon: mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
         React.createElement("div", { style: { flexShrink: 0 } },
             React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
-        React.createElement(Content$3, null,
+        React.createElement(Content$4, null,
             title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
             action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$g = styled.div `
   border: 1px solid ${Colors.PRIMARY.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -2389,7 +2389,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$f, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
             React.createElement(Info$1, null,
                 React.createElement(Selected, null,
@@ -2402,7 +2402,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$f = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -2431,7 +2431,7 @@ const MenuItem = styled.div `
     }
   }
 `;
-const Title = styled.span `
+const Title$1 = styled.span `
   font-family: Roboto;
   font-size: 14px;
   font-weight: 400;
@@ -2442,14 +2442,14 @@ const Title = styled.span `
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$f, 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, null, item.label)));
+            React.createElement(Title$1, null, item.label)));
     })));
 };
 
-const Wrapper$d = styled.div `
+const Wrapper$e = styled.div `
   position: relative;
   display: inline-block;
 `;
@@ -2463,12 +2463,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$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
+    return (React.createElement(Wrapper$e, { 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$c = styled.label `
+const Wrapper$d = styled.label `
   padding: 4px 0;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
@@ -2483,7 +2483,7 @@ const Input$2 = styled.input `
   line-height: 1.1em;
   box-sizing: border-box;
 `;
-const Label$3 = styled.span `
+const Label$4 = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -2494,9 +2494,9 @@ const Label$3 = styled.span `
 `;
 const Checkbox = (_a) => {
     var { children, disabled, checked, onChange } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
-    return (React.createElement(Wrapper$c, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
-        children ? React.createElement(Label$3, null, children) : null));
+        children ? React.createElement(Label$4, null, children) : null));
 };
 
 const SelectAll = styled.div `
@@ -2863,7 +2863,7 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-const Wrapper$b = styled.div `
+const Wrapper$c = styled.div `
   border-radius: 4px;
   height: 40px;
   background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
@@ -2907,7 +2907,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$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
+    return (React.createElement(Wrapper$c, { "$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 &&
@@ -3077,7 +3077,7 @@ const Drawer = (_a) => {
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 
-const Wrapper$a = styled.div `
+const Wrapper$b = styled.div `
   display: inline-block;
   position: relative;
   height: 16px;
@@ -3117,15 +3117,15 @@ const positions = {
         transform: 'translateY(-50%)',
     },
 };
-const Content$2 = 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: 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 Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = useState(false);
-    return (React.createElement(Wrapper$a, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+    return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$2, { path: mdiInformationOutline }),
-        show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
 };
 
-const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
+const Wrapper$a = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
 const LabelRow = styled.div `
   display: flex;
   align-items: center;
@@ -3133,7 +3133,7 @@ const LabelRow = styled.div `
   margin: 0 0 4px 0;
   box-sizing: border-box;
 `;
-const Label$2 = styled.label `
+const Label$3 = styled.label `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 500;
   line-height: 1em;
@@ -3174,9 +3174,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$9, Object.assign({ style: style }, accessibleProps),
+    return (React.createElement(Wrapper$a, Object.assign({ style: style }, accessibleProps),
         React.createElement(LabelRow, null,
-            React.createElement(Label$2, { htmlFor: htmlFor },
+            React.createElement(Label$3, { htmlFor: htmlFor },
                 label,
                 required ? React.createElement(Required, null, "*") : null,
                 tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
@@ -3186,6 +3186,41 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, null, validationText) : null));
 };
 
+const Wrapper$9 = styled.fieldset `
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-block-start: 0px;
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+  padding-block-end: 0px;
+  min-inline-size: min-content;
+  border-width: 0px;
+  border-style: none;
+  border-color: transparent;
+  border-image: none;
+`;
+const Label$2 = styled.legend `
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 6px;
+`;
+const Content$2 = 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)));
+};
+
 const Dropzone = styled.div `
   border-radius: 8px;
   border-width: 1px;
@@ -3605,6 +3640,49 @@ const Logo = (_a) => {
     }
 };
 
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+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: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
+            React.createElement(StepLabel, null, step.label)));
+    })));
+};
+
 const Wrapper$7 = styled.div `
   position: fixed;
   top: 0;
@@ -3653,41 +3731,6 @@ const CloseMsg = styled.span `
   line-height: 1em;
   color: ${Colors.MEDIUM_GRAY.Hex};
 `;
-const Steps = styled.div `
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  background: #f5f5f5;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-`;
-const Step = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
 const ContentWrapper = styled.div `
   overflow-x: hidden;
   overflow-y: auto;
@@ -3725,11 +3768,7 @@ const Modal = (_a) => {
                 React.createElement(Close, { onClick: onClose },
                     React.createElement(CloseMsg, null, "(Esc)"),
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
-            steps ? (React.createElement(Steps, null, steps.map((step, i) => {
-                return (React.createElement(Step, { key: i },
-                    step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
-                    React.createElement(StepLabel, null, step.label)));
-            }))) : null,
+            steps ? React.createElement(ProgressBar, { steps: steps }) : null,
             React.createElement(ContentWrapper, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
                 tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
@@ -3825,6 +3864,40 @@ const MultiSelect = (_a) => {
 };
 
 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;
   align-items: center;
@@ -3832,6 +3905,11 @@ const Wrapper$5 = styled.div `
   align-self: stretch;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
 `;
+const Title = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
 const Info = styled.div `
   display: flex;
   flex-direction: column;
@@ -3849,11 +3927,13 @@ const Actions = styled.div `
   align-items: center;
   gap: 8px;
 `;
-const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
+const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
     const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
-    return (React.createElement(Wrapper$5, null,
+    return (React.createElement(Wrapper$4, null,
         React.createElement(Info, null,
-            React.createElement(Heading, { type: 'secondary' }, title),
+            React.createElement(Title, null,
+                React.createElement(Heading, { type: 'secondary' }, title),
+                tag ? React.createElement(Tag, Object.assign({}, tag)) : null),
             breadcrumbs ? (React.createElement(Breadcrumbs, null, breadcrumbs.map((crumb, i) => {
                 return (React.createElement(React.Fragment, { key: i },
                     crumb.onClick ? (React.createElement(Link, { onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { type: 'small' }, crumb.label)),
@@ -3867,7 +3947,7 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
             menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
 };
 
-const Wrapper$4 = styled.nav `
+const Wrapper$3 = styled.nav `
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -3893,7 +3973,7 @@ const Pagination = (_a) => {
             onClick(new_page);
         }
     };
-    return (React.createElement(Wrapper$4, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps),
         React.createElement(Button, { disabled: is_first_page, icon: mdiChevronLeft, onClick: handlePrevClick, small: true }),
         React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
                 label: `Page ${p}`,
@@ -3902,7 +3982,7 @@ const Pagination = (_a) => {
         React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
 };
 
-const Wrapper$3 = styled.label `
+const Wrapper$2 = styled.label `
   padding: 4px 0;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
@@ -3916,7 +3996,7 @@ const Input = styled.input `
   margin: 0px 0px 2px 0px;
   line-height: 1.1em;
 `;
-const Label$1 = styled.span `
+const Label = styled.span `
   font-family: ${FontStyles.DEFAULT};
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
@@ -3926,9 +4006,9 @@ const Label$1 = styled.span `
 `;
 const Radio = (_a) => {
     var { children, disabled, checked, onChange, value } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
-    return (React.createElement(Wrapper$3, Object.assign({ "$disabled": disabled }, accessibleProps),
+    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled }, accessibleProps),
         React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
-        React.createElement(Label$1, null, children)));
+        React.createElement(Label, null, children)));
 };
 
 const RadioList = (_a) => {
@@ -4010,7 +4090,7 @@ const Table = (_a) => {
         }))) : null));
 };
 
-const Wrapper$2 = styled.div `
+const Wrapper$1 = styled.div `
   display: flex;
   box-sizing: border-box;
   align-items: flex-end;
@@ -4059,7 +4139,7 @@ const Badge = styled.div `
 `;
 const Tabs = (_a) => {
     var { tabs } = _a, accessibleProps = __rest(_a, ["tabs"]);
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
+    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
         var { isActive, label, badgeCount, errorBadge, onClick } = _a, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
         return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps),
             badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
@@ -4068,40 +4148,6 @@ const Tabs = (_a) => {
 };
 Tabs.defaultProps = {};
 
-const Wrapper$1 = 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 = 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$1, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
-        React.createElement(Content, null,
-            React.createElement(Label, { "$color": color }, children),
-            removable ? (React.createElement(Remove, null,
-                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
-};
-
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;
@@ -4169,5 +4215,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, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FieldGroup, FileUpload, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState };
 //# sourceMappingURL=index.js.map