@hexure/ui 1.8.11 → 1.8.13

package/dist/cjs/index.js

@@ -2029,7 +2029,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};
@@ -2041,7 +2041,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 ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
         open ? children : null));
 };
@@ -2433,7 +2433,7 @@ const MenuItem = styled.div `
     }
   }
 `;
-const Title = styled.span `
+const Title$1 = styled.span `
   font-family: Roboto;
   font-size: 14px;
   font-weight: 400;
@@ -2447,7 +2447,7 @@ const MoreMenu = (_a) => {
     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, null, item.label)));
+            React.createElement(Title$1, null, item.label)));
     })));
 };
 
@@ -3827,6 +3827,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: js.mdiClose, size: '15px' }))) : null)));
+};
+
+const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
   align-items: center;
@@ -3834,6 +3868,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;
@@ -3851,11 +3890,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)),
@@ -3869,7 +3910,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;
@@ -3895,7 +3936,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: js.mdiChevronLeft, onClick: handlePrevClick, small: true }),
         React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
                 label: `Page ${p}`,
@@ -3904,7 +3945,7 @@ const Pagination = (_a) => {
         React.createElement(Button, { disabled: is_last_page, icon: js.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;
@@ -3918,7 +3959,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;
@@ -3928,9 +3969,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) => {
@@ -4012,7 +4053,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;
@@ -4061,7 +4102,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,
@@ -4070,40 +4111,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: js.mdiClose, size: '15px' }))) : null)));
-};
-
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;