@hexure/ui 1.8.14 → 1.8.16

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

@@ -12,6 +12,8 @@ export interface AlertProps extends AccessibleProps {
     description: string;
     /** Display a link to display below the description */
     action?: ActionProps;
+    /** Show a condensed, smaller version of the alert. The title and action props will be ignore if this is set to true */
+    small?: boolean;
 }
 declare const Alert: FC<AlertProps>;
 export default Alert;

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

@@ -33,7 +33,7 @@ export interface InputProps extends AccessibleProps {
     /** Set the css of the wrapping div */
     style?: styleProps;
     /** Define the type of input to be displayed */
-    type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
+    type?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
     /** Set the value of the input. This should be used by the parent component to control the input's value. */
     value?: string;
 }

package/dist/esm/index.js

@@ -2121,7 +2121,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;
@@ -2150,7 +2150,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 ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
 };
@@ -2278,11 +2278,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};
@@ -2293,7 +2294,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,
@@ -2312,13 +2313,12 @@ const Alert = (_a) => {
             icon: 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 `