@hexure/ui 1.13.60 → 1.13.62

package/dist/esm/index.js

@@ -374,7 +374,7 @@ const Wrapper$g = styled.div `
   justify-content: center;
   box-sizing: border-box;
 `;
-const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
+const Container$5 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
 const Buttons$1 = styled.div `
   display: flex;
   gap: 10px;
@@ -387,7 +387,7 @@ const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
     const baseId = dataItemid || 'action-dialog';
     return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
-        React.createElement(Container$4, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
+        React.createElement(Container$5, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
             title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? (React.createElement(Copy, { align: 'center', "data-itemid": `${baseId}-description` }, description)) : null,
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, { "data-itemid": `${baseId}-buttons` },
@@ -492,7 +492,7 @@ const Logo = (_a) => {
     }
 };
 
-const Container$3 = styled.header `
+const Container$4 = styled.header `
   width: 100%;
   display: flex;
   padding: 20px;
@@ -517,7 +517,7 @@ const Buttons = styled.div `
 `;
 const AppHeader = ({ logoUrl, buttons = [], dataItemid }) => {
     const baseId = dataItemid || 'app-header';
-    return (React.createElement(Container$3, { "data-itemid": `${baseId}-container` },
+    return (React.createElement(Container$4, { "data-itemid": `${baseId}-container` },
         React.createElement(LogoWrapper, { "data-itemid": `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { "data-itemid": `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { "data-itemid": `${baseId}-default-logo`, height: '30px' }))),
         React.createElement(Buttons, { "data-itemid": `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { "data-itemid": `${baseId}-button-${i}` })))))));
 };
@@ -1286,7 +1286,7 @@ const Scrim$1 = styled.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
   background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
 `;
-const Container$2 = styled.div `
+const Container$3 = styled.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
   min-width: 400px;
   width: ${({ $width }) => $width || '400px'};
@@ -1329,8 +1329,8 @@ const ContentWrapper$1 = styled.div `
 const ButtonBar$1 = styled.div `
   padding: 20px;
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  align-items: flex-end;
+  justify-content: center;
   box-sizing: border-box;
   gap: 10px;
   flex-shrink: 0;
@@ -1355,7 +1355,7 @@ const Drawer = (_a) => {
     }, [onClose]);
     const baseId = dataItemid || 'drawer';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width, "data-itemid": `${baseId}-container` }),
+        React.createElement(Container$3, Object.assign({}, accessibleProps, { "$position": position, "$width": width, "data-itemid": `${baseId}-container` }),
             React.createElement(Header$2, { "data-itemid": `${baseId}-header` },
                 React.createElement("div", { "data-itemid": `${baseId}-header-content` },
                     title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, type: 'secondary' }, title)) : null,
@@ -2201,6 +2201,7 @@ const StepLine = styled.div `
   background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
   transition: background-color 0.5s ease-in-out;
 `;
+const Container$2 = styled.div ``;
 const ProgressBarFill = styled.div `
   width: 110px;
   height: 8px;
@@ -2210,8 +2211,7 @@ const ProgressBarFill = styled.div `
   position: relative;
   overflow: hidden;
 
-  &::after {
-    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
+  .progress-percentage {
     position: absolute;
     top: 55%;
     left: ${props => props.$percent >= 83 ? 'calc(100% - 25px)' : `calc(${props.$percent}% + 10px)`};
@@ -2223,8 +2223,7 @@ const ProgressBarFill = styled.div `
     transition: left 0.5s ease-in-out;
   }
 
-  &::before {
-    content: '';
+  .progress-bar-fill {
     position: absolute;
     top: 0;
     left: 0;
@@ -2245,7 +2244,11 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
                     React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
                     step.label,
-                    step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` }))))));
+                    step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
+                        React.createElement(Container$2, { className: 'progress-bar-fill' }),
+                        React.createElement(Container$2, { className: 'progress-percentage', "data-itemid": `${stepId}-percentage` },
+                            step.percentComplete,
+                            "%")))))));
     })));
 };