@hexure/ui 1.13.89 → 1.13.90

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

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { CSSProperties } from 'styled-components';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface HeadingProps extends AccessibleProps {
     /** Toggle between bold and normal font weights */
@@ -13,6 +14,8 @@ export interface HeadingProps extends AccessibleProps {
     type?: 'primary' | 'secondary' | 'tertiary';
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    /** Optional style for the header title */
+    style?: CSSProperties;
 }
 declare const Heading: FC<HeadingProps>;
 export default Heading;

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

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { CSSProperties } from 'styled-components';
 import { AccessibleProps } from '../../utils/Accessibility';
 import { StepProps } from '../ProgressBar/ProgressBar';
 interface ButtonProps {
@@ -34,6 +35,12 @@ export interface ModalProps extends AccessibleProps {
     steps?: StepProps[];
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    /** Optional style for the modal */
+    modalStyle?: CSSProperties;
+    /** Optional style for the header */
+    headerStyle?: CSSProperties;
+    /** Optional style for the header title */
+    headerTitleStyle?: CSSProperties;
 }
 declare const Modal: FC<ModalProps>;
 export default Modal;

package/dist/esm/index.js

@@ -2946,6 +2946,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};
@@ -2956,6 +2957,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};
@@ -2966,19 +2968,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));
         }
     }
 };
@@ -5697,7 +5700,7 @@ 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 { 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"]);
     useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -5709,10 +5712,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: mdiClose, size: '24px' }))),