@hexure/ui 1.8.15 → 1.8.17

package/dist/cjs/index.js

@@ -2123,7 +2123,7 @@ const Label$5 = styled.span `
   font-weight: 500;
   line-height: 1;
 `;
-const StyledIcon$3 = styled.span `
+const StyledIcon$4 = styled.span `
   margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
   margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
   display: flex;
@@ -2152,7 +2152,7 @@ const Button = (_a) => {
     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$5, { "$format": format, "$small": small }, children)) : null,
-        icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
+        icon && !badge ? (React.createElement(StyledIcon$4, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
 };
@@ -2280,11 +2280,12 @@ const Wrapper$h = styled.div `
   box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: flex-start;
-  padding: 20px;
+  gap: ${({ $small }) => ($small ? '8px' : '20px')};
+  padding: ${({ $small }) => ($small ? '11px' : '20px')};
   box-sizing: border-box;
 `;
-const Content$4 = styled.div `
-  margin-left: 20px;
+const StyledIcon$3 = styled(Icon) `
+  flex-shrink: 0;
 `;
 const Action$1 = styled.div `
   color: ${Colors.PRIMARY.Hex};
@@ -2295,7 +2296,7 @@ const Action$1 = styled.div `
   margin-top: 6px;
 `;
 const Alert = (_a) => {
-    var { action, type = 'info', title, description } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description"]);
+    var { action, type = 'info', title, description, small = false } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small"]);
     const type_mapping = {
         info: {
             color: Colors.PRIMARY.Hex,
@@ -2314,13 +2315,12 @@ const Alert = (_a) => {
             icon: js.mdiCheckboxMarkedCircleOutline,
         },
     };
-    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$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)));
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
+        React.createElement(StyledIcon$3, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
+        React.createElement("div", null,
+            title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
+            description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
+            action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
 
 const Wrapper$g = styled.div `
@@ -2398,7 +2398,7 @@ const BulkActionBar = (_a) => {
                     selectedCount,
                     " Selected"),
                 onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
-            React.createElement(Actions$1, null, actions.map(action => (React.createElement(Button, Object.assign({}, action, { small: true })))))),
+            React.createElement(Actions$1, null, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { key: i, small: true })))))),
         errorMsg ? (React.createElement(Error$1, null,
             React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));