@hexure/ui 1.3.1 → 1.3.2

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

@@ -1,11 +1,17 @@
 import { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
+export interface ActionProps extends AccessibleProps {
+    label: string;
+    onClick: (e?: any) => void;
+}
 export interface AlertProps extends AccessibleProps {
     type?: 'info' | 'error' | 'warning' | 'success';
     /** It is used to add title to alert. */
     title: string;
     /** It is used to add description to alert. */
     description: string;
+    /** Display a link to display below the description */
+    action?: ActionProps;
 }
 declare const Alert: FC<AlertProps>;
 export default Alert;

package/dist/esm/index.js

@@ -2082,7 +2082,7 @@ var StyledButton = styled.button(templateObject_1$l || (templateObject_1$l = __m
     return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
 }, function (props) { return (props.$disabled ? 0.6 : 1); });
 var Label$4 = styled.span(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: ", ";\n"])), function (props) { return (props.$format ? button_type_mapping[props.$format].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
-var StyledIcon$1 = styled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
+var StyledIcon$1 = styled.span(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
 var Badge = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  font-family: ", ";\n  letter-spacing: -1px;\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  font-family: ", ";\n  letter-spacing: -1px;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) { return (props.$small ? '20px' : '24px'); }, function (props) { return (props.$small ? '20px' : '24px'); }, function (props) {
     return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
 }, function (props) {
@@ -2097,7 +2097,7 @@ var Button = function (_a) {
             React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
         badge && !icon ? (React.createElement(Badge, { "$format": format, "$small": small }, badge)) : null));
 };
-var templateObject_1$l, templateObject_2$j, templateObject_3$f, templateObject_4$8;
+var templateObject_1$l, templateObject_2$j, templateObject_3$g, templateObject_4$8;
 
 var StyledComponent = styled.p(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  text-align: ", ";\n  box-sizing: border-box;\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
     return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
@@ -2113,7 +2113,7 @@ var templateObject_1$k;
 
 var H1 = styled.h1(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 30px;\n  font-weight: ", ";\n  line-height: 1.4em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
 var H2 = styled.h2(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 24px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
-var H3 = styled.h3(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
+var H3 = styled.h3(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"], ["\n  color: ", ";\n  font-size: 18px;\n  font-weight: ", ";\n  line-height: 1.33em;\n  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n  margin: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
 var Heading = function (_a) {
     var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
     switch (type) {
@@ -2132,11 +2132,11 @@ Heading.defaultProps = {
     bold: false,
     type: 'primary',
 };
-var templateObject_1$j, templateObject_2$i, templateObject_3$e;
+var templateObject_1$j, templateObject_2$i, templateObject_3$f;
 
 var Wrapper$d = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n"])));
 var Container$3 = styled.dialog(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"], ["\n  max-width: 600px;\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 40px;\n  text-align: center;\n  box-sizing: border-box;\n"])));
-var Buttons = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
+var Buttons = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 30px;\n  box-sizing: border-box;\n"])));
 var ActionDialog = function (_a) {
     var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
     useEffect(function () {
@@ -2157,12 +2157,13 @@ var ActionDialog = function (_a) {
                 secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
                 primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
 };
-var templateObject_1$i, templateObject_2$h, templateObject_3$d;
+var templateObject_1$i, templateObject_2$h, templateObject_3$e;
 
 var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"], ["\n  border: 1px solid #f1f1f1;\n  border-radius: 4px;\n  border-left-width: 4px;\n  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: flex-start;\n  padding: 20px;\n  box-sizing: border-box;\n"])));
 var Content$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  margin-left: 20px;\n"], ["\n  margin-left: 20px;\n"])));
+var Action$1 = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  margin-top: 6px;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  cursor: pointer;\n  margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
 var Alert = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
+    var action = _a.action, _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["action", "type", "title", "description"]);
     var type_mapping = {
         info: {
             color: Colors.PRIMARY.Hex,
@@ -2186,9 +2187,10 @@ var Alert = function (_a) {
             React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
         React.createElement(Content$1, null,
             title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
-            description ? React.createElement(Copy, { margin: '10px 0 0 0' }, description) : null)));
+            description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
+            action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
 };
-var templateObject_1$h, templateObject_2$g;
+var templateObject_1$h, templateObject_2$g, templateObject_3$d;
 
 var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
 var Left = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n"])));