@hexure/ui 1.13.89 → 1.13.91

package/dist/cjs/index.js

@@ -2760,13 +2760,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
         }
           
       `),
-            React.createElement(StyledAnchor, { "data-itemid": `${baseId}-icon-wrapper`, "data-tooltip-html": children, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline })),
+            React.createElement(StyledAnchor, { "data-itemid": `${baseId}-icon-wrapper`, "data-tooltip-id": 'auto-tooltip-data-html' }, trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline })),
             React.createElement(TooltipPortal, null,
-                React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html' }))));
+                React.createElement(M, { className: 'custom-tooltip', classNameArrow: 'custom-tooltip-arrow', "data-itemid": `${baseId}-content`, id: 'auto-tooltip-data-html', render: () => React.createElement("p", { "data-itemid": `${baseId}-text` }, children) }))));
     }
     return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline }),
-        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-copy`, type: 'small' }, children)))) : null));
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-text`, type: 'small' }, children)))) : null));
 };
 const TooltipPortal = ({ children }) => {
     const [container, setContainer] = React.useState();
@@ -2948,6 +2948,7 @@ const H1 = styled.h1 `
   margin: ${props => props.$margin || '0px'};
   padding: ${props => props.$padding || '0px'};
   box-sizing: border-box;
+  ${props => props === null || props === void 0 ? void 0 : props.$customStyles};
 `;
 const H2 = styled.h2 `
   color: ${Colors.BLACK.Hex};
@@ -2958,6 +2959,7 @@ const H2 = styled.h2 `
   margin: ${props => props.$margin || '0px'};
   padding: ${props => props.$padding || '0px'};
   box-sizing: border-box;
+  ${props => props === null || props === void 0 ? void 0 : props.$customStyles};
 `;
 const H3 = styled.h3 `
   color: ${Colors.BLACK.Hex};
@@ -2968,19 +2970,20 @@ const H3 = styled.h3 `
   margin: ${props => props.$margin || '0px'};
   padding: ${props => props.$padding || '0px'};
   box-sizing: border-box;
+  ${props => props === null || props === void 0 ? void 0 : props.$customStyles};
 `;
 const Heading = (_a) => {
-    var { bold, children, margin, padding, type, dataItemid } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "dataItemid"]);
+    var { bold, children, margin, padding, type, dataItemid, style } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "dataItemid", "style"]);
     const baseId = dataItemid || 'heading';
     switch (type) {
         case 'secondary': {
-            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h2` }), children));
+            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h2`, style: style }), children));
         }
         case 'tertiary': {
-            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h3` }), children));
+            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h3`, style: style }), children));
         }
         default: {
-            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h1` }), children));
+            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h1`, style: style }), children));
         }
     }
 };
@@ -5699,7 +5702,8 @@ const ButtonContainer = styled.div `
   margin: 0 10px;
 `;
 const Modal = (_a) => {
-    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "dataItemid"]);
+    var _b, _c, _d, _e;
+    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, dataItemid, modalStyle, headerStyle, headerTitleStyle } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "dataItemid", "modalStyle", "headerStyle", "headerTitleStyle"]);
     React.useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -5711,10 +5715,10 @@ const Modal = (_a) => {
         };
     }, [onClose]);
     const baseId = dataItemid || 'modal';
-    return (React.createElement(Wrapper$6, { "data-itemid": `${baseId}-wrapper` },
+    return (React.createElement(Wrapper$6, { "data-itemid": `${baseId}-wrapper`, style: modalStyle },
         React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps, { "data-itemid": `${baseId}-container` }),
-            React.createElement(Header$1, { "data-itemid": `${baseId}-header` },
-                title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, type: 'secondary' }, title)) : null,
+            React.createElement(Header$1, { "data-itemid": `${baseId}-header`, style: headerStyle },
+                title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, style: headerTitleStyle, type: 'secondary' }, title)) : null,
                 React.createElement(Close, { "data-itemid": `${baseId}-close`, onClick: onClose },
                     React.createElement(CloseMsg, { "data-itemid": `${baseId}-close-msg` }, "(Esc)"),
                     React.createElement(Icon, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-close-icon`, path: js.mdiClose, size: '24px' }))),
@@ -5727,9 +5731,9 @@ const Modal = (_a) => {
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": tertiaryButton.children || `${baseId}-${tertiaryButton.children}`, dataItemid: tertiaryButton.children || `${baseId}-${tertiaryButton.children}`, format: tertiaryButton.format || 'secondary' }))) : null,
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { dataItemid: (_b = tertiaryButton.dataItemid) !== null && _b !== void 0 ? _b : tertiaryButton.children, format: tertiaryButton.format || 'secondary' }))) : null,
                     quarternaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-quarternary-button-container` },
-                        React.createElement(Button, Object.assign({}, quarternaryButton, { "data-itemid": quarternaryButton.children || `${baseId}-${quarternaryButton.children}`, dataItemid: quarternaryButton.children || `${baseId}-${quarternaryButton.children}`, format: quarternaryButton.format || 'secondary' })))) : null)) : null,
+                        React.createElement(Button, Object.assign({}, quarternaryButton, { dataItemid: (_c = quarternaryButton.dataItemid) !== null && _c !== void 0 ? _c : quarternaryButton.children, format: quarternaryButton.format || 'secondary' })))) : null)) : null,
                 primaryButton || secondaryButton ? (React.createElement("div", { "data-itemid": `${baseId}-right-buttons`, style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
@@ -5737,8 +5741,8 @@ const Modal = (_a) => {
                         alignItems: 'center',
                     } },
                     secondaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-secondary-button-container` },
-                        React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": secondaryButton.children || `${baseId}-${secondaryButton.children}`, dataItemid: secondaryButton.children || `${baseId}-${secondaryButton.children}`, format: secondaryButton.format || 'secondary' })))) : null,
-                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": primaryButton.children || `${baseId}-${primaryButton.children}`, dataItemid: primaryButton.children || `${baseId}-${primaryButton.children}`, format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
+                        React.createElement(Button, Object.assign({}, secondaryButton, { dataItemid: (_d = secondaryButton.dataItemid) !== null && _d !== void 0 ? _d : secondaryButton.children, format: secondaryButton.format || 'secondary' })))) : null,
+                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { dataItemid: (_e = primaryButton.dataItemid) !== null && _e !== void 0 ? _e : primaryButton.children, format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
 };
 
 const Wrapper$5 = styled.div `