@hexure/ui 1.1.1 → 1.1.2

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

@@ -13,7 +13,7 @@ export interface ButtonProps extends AccessibleProps {
     /** If enabled, the small button format will be used. */
     small?: boolean;
     /** Define which button type to display. By default the Primary button will be used.  */
-    type?: 'primary' | 'secondary';
+    type?: 'primary' | 'secondary' | 'red';
 }
 declare const Button: FC<ButtonProps>;
 export default Button;

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

@@ -9,8 +9,8 @@ interface ButtonProps {
 }
 export interface ModalProps extends AccessibleProps {
     primaryButton: ButtonProps;
-    secondaryButton: ButtonProps;
-    tertiaryButton: ButtonProps;
+    secondaryButton?: ButtonProps;
+    tertiaryButton?: ButtonProps;
     maxWidth?: string | number;
     /** It is used to pass child nodes, string values and number as child components. */
     children: ReactNode;

package/dist/cjs/types/components/Multiselect/MultiSelect.d.ts

@@ -8,7 +8,7 @@ export interface MultiSelectProps extends AccessibleProps {
     readOnly?: boolean;
     displayCount?: number;
     invalid?: boolean;
-    onChange: (e?: any) => void;
+    onChange: (e: any) => void;
     options?: OptionProps[];
     selected: (string | number)[];
     showSelectAll?: boolean;

package/dist/esm/index.js

@@ -2035,6 +2035,23 @@ var Accordion = function (_a) {
 };
 var templateObject_1$j, templateObject_2$h;
 
+var button_type_mapping = {
+    primary: {
+        background_color: Colors.PRIMARY.Hex,
+        border_color: Colors.PRIMARY.Hex,
+        content_color: '#fff',
+    },
+    secondary: {
+        background_color: 'transparent',
+        border_color: Colors.PRIMARY.Hex,
+        content_color: Colors.PRIMARY.Hex,
+    },
+    red: {
+        background_color: Colors.RED.Hex,
+        border_color: Colors.RED.Hex,
+        content_color: '#fff',
+    },
+};
 var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"], ["\n  height: ", ";\n  line-height: 1em;\n  border-radius: ", ";\n  margin: ", ";\n  padding: ", ";\n  outline: none;\n  background: ", ";\n  width: ", ";\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  &:hover {\n    opacity: ", ";\n  }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
     if (props.$hasChildren) {
         if (props.$small) {
@@ -2045,7 +2062,9 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         }
     }
     return '0px';
-}, function (props) { return (props.$type === 'secondary' ? 'transparent' : Colors.PRIMARY.Hex); }, function (props) {
+}, function (props) {
+    return props.$type ? button_type_mapping[props.$type].background_color : Colors.PRIMARY.Hex;
+}, function (props) {
     if (props.$hasChildren) {
         return 'auto';
     }
@@ -2053,16 +2072,18 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
         return '30px';
     }
     return '40px';
-}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, Colors.PRIMARY.Hex, function (props) { return (props.$disabled ? 0.6 : 1); });
-var Label$3 = styled.span(templateObject_2$g || (templateObject_2$g = __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.$type === 'secondary' ? Colors.PRIMARY.Hex : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
+}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
+    return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
+}, function (props) { return (props.$disabled ? 0.6 : 1); });
+var Label$3 = styled.span(templateObject_2$g || (templateObject_2$g = __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.$type ? button_type_mapping[props.$type].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 = styled.span(templateObject_3$b || (templateObject_3$b = __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 Button = function (_a) {
     var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.margin, margin = _c === void 0 ? '' : _c, onClick = _a.onClick, _d = _a.small, small = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? 'primary' : _e, accessibleProps = __rest(_a, ["children", "disabled", "icon", "margin", "onClick", "small", "type"]);
     var has_children = children && children.length > 0;
-    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$onClick": disabled ? undefined : onClick, "$small": small, "$type": type }, accessibleProps),
+    return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small, "$type": type, onClick: disabled ? undefined : onClick }, accessibleProps),
         children ? (React.createElement(Label$3, { "$small": small, "$type": type }, children)) : null,
         icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: type === 'secondary' ? Colors.PRIMARY.Hex : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
+            React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
 };
 var templateObject_1$i, templateObject_2$g, templateObject_3$b;
 
@@ -2322,7 +2343,7 @@ var Container = styled.dialog(templateObject_2$7 || (templateObject_2$7 = __make
 var Header$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
 var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
 var CloseMsg = styled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
-var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
+var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
 var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
 var Modal = function (_a) {
     var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);