@hexure/ui 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/index.js +27 -6
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Button/Button.d.ts +1 -1
  4. package/dist/cjs/types/components/Modal/Modal.d.ts +2 -2
  5. package/dist/cjs/types/components/Multiselect/MultiSelect.d.ts +1 -1
  6. package/dist/esm/index.js +27 -6
  7. package/dist/esm/index.js.map +1 -1
  8. package/dist/esm/types/components/Button/Button.d.ts +1 -1
  9. package/dist/esm/types/components/Modal/Modal.d.ts +2 -2
  10. package/dist/esm/types/components/Multiselect/MultiSelect.d.ts +1 -1
  11. package/dist/index.d.ts +4 -4
  12. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -2037,6 +2037,23 @@ var Accordion = function (_a) {
2037
2037
  };
2038
2038
  var templateObject_1$j, templateObject_2$h;
2039
2039
 
2040
+ var button_type_mapping = {
2041
+ primary: {
2042
+ background_color: Colors.PRIMARY.Hex,
2043
+ border_color: Colors.PRIMARY.Hex,
2044
+ content_color: '#fff',
2045
+ },
2046
+ secondary: {
2047
+ background_color: 'transparent',
2048
+ border_color: Colors.PRIMARY.Hex,
2049
+ content_color: Colors.PRIMARY.Hex,
2050
+ },
2051
+ red: {
2052
+ background_color: Colors.RED.Hex,
2053
+ border_color: Colors.RED.Hex,
2054
+ content_color: '#fff',
2055
+ },
2056
+ };
2040
2057
  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) {
2041
2058
  if (props.$hasChildren) {
2042
2059
  if (props.$small) {
@@ -2047,7 +2064,9 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
2047
2064
  }
2048
2065
  }
2049
2066
  return '0px';
2050
- }, function (props) { return (props.$type === 'secondary' ? 'transparent' : Colors.PRIMARY.Hex); }, function (props) {
2067
+ }, function (props) {
2068
+ return props.$type ? button_type_mapping[props.$type].background_color : Colors.PRIMARY.Hex;
2069
+ }, function (props) {
2051
2070
  if (props.$hasChildren) {
2052
2071
  return 'auto';
2053
2072
  }
@@ -2055,16 +2074,18 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
2055
2074
  return '30px';
2056
2075
  }
2057
2076
  return '40px';
2058
- }, 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); });
2059
- 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'); });
2077
+ }, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
2078
+ return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
2079
+ }, function (props) { return (props.$disabled ? 0.6 : 1); });
2080
+ 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'); });
2060
2081
  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'); });
2061
2082
  var Button = function (_a) {
2062
2083
  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"]);
2063
2084
  var has_children = children && children.length > 0;
2064
- return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$onClick": disabled ? undefined : onClick, "$small": small, "$type": type }, accessibleProps),
2085
+ return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small, "$type": type, onClick: disabled ? undefined : onClick }, accessibleProps),
2065
2086
  children ? (React.createElement(Label$3, { "$small": small, "$type": type }, children)) : null,
2066
2087
  icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
2067
- React.createElement(Icon, { color: type === 'secondary' ? Colors.PRIMARY.Hex : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
2088
+ React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
2068
2089
  };
2069
2090
  var templateObject_1$i, templateObject_2$g, templateObject_3$b;
2070
2091
 
@@ -2324,7 +2345,7 @@ var Container = styled.dialog(templateObject_2$7 || (templateObject_2$7 = __make
2324
2345
  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"])));
2325
2346
  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"])));
2326
2347
  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);
2327
- 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"])));
2348
+ 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"])));
2328
2349
  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"])));
2329
2350
  var Modal = function (_a) {
2330
2351
  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"]);