@hexure/ui 1.6.4 → 1.6.6

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

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 interface ButtonProps {
     children: string;
+    format?: 'primary' | 'red';
     icon?: string;
     onClick: (e?: any) => void;
     tabIndex?: number;

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

@@ -21,6 +21,8 @@ export interface DrawerProps extends AccessibleProps {
     width?: string | number;
     /** Display an scrim over the main content, forcing users to interact with the drawer */
     scrim?: 'transparent' | 'dark';
+    /** Set the drawer's positioning. Default is 'fixed' */
+    position?: 'fixed' | 'absolute';
     /**  It is used to close drawer. */
     onClose: (e?: any) => void;
 }

package/dist/esm/index.js

@@ -2096,7 +2096,7 @@ var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __m
 }, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
     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$l || (templateObject_2$l = __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 Label$4 = styled.span(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: 1;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 500;\n  line-height: 1;\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);
 var StyledIcon$2 = styled.span(templateObject_3$i || (templateObject_3$i = __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$1 = styled.span(templateObject_4$9 || (templateObject_4$9 = __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';
@@ -2161,7 +2161,7 @@ var ActionDialog = function (_a) {
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons, null,
                 tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
-                primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null)));
+                primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
 };
 var templateObject_1$l, templateObject_2$j, templateObject_3$g;
 
@@ -2682,20 +2682,32 @@ var DatePicker = function (_a) {
 };
 var templateObject_1$f, templateObject_2$d;
 
-var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9998;\n  background: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9998;\n  background: ", ";\n"])), function (_a) {
+var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  background: ", ";\n"], ["\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: ", ";\n  background: ", ";\n"])), function (_a) {
+    var $position = _a.$position;
+    return $position;
+}, function (_a) {
+    var $position = _a.$position;
+    return ($position === 'fixed' ? 9998 : 10);
+}, function (_a) {
     var $scrim = _a.$scrim;
     return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
 });
-var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  z-index: 9999;\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"], ["\n  z-index: 9999;\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"])), function (_a) {
+var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  z-index: ", ";\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"], ["\n  z-index: ", ";\n  min-width: 400px;\n  width: ", ";\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: ", ";\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  background: #fff;\n"])), function (_a) {
+    var $position = _a.$position;
+    return ($position === 'fixed' ? 9998 : 11);
+}, function (_a) {
     var $width = _a.$width;
     return $width || '400px';
+}, function (_a) {
+    var $position = _a.$position;
+    return $position;
 });
 var Header$2 = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 30px 20px;\n  display: flex;\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background: #fff;\n"])));
 var Close$1 = styled.div(templateObject_4$7 || (templateObject_4$7 = __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 ContentWrapper$1 = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-sizing: border-box;\n  flex: 1;\n  background: #fff;\n"])));
 var ButtonBar$1 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"], ["\n  padding: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  gap: 10px;\n  flex-shrink: 0;\n  background: #fff;\n"])));
 var Drawer = function (_a) {
-    var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, scrim = _a.scrim, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "secondaryButton", "tertiaryButton", "scrim", "width"]);
+    var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, _b = _a.position, position = _b === void 0 ? 'fixed' : _b, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, _c = _a.scrim, scrim = _c === void 0 ? 'dark' : _c, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
     useEffect(function () {
         document.onkeydown = function (e) {
             if (e.key === 'Escape') {
@@ -2707,7 +2719,7 @@ var Drawer = function (_a) {
         };
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, __assign({}, accessibleProps, { "$width": width }),
+        React.createElement(Container$2, __assign({}, accessibleProps, { "$position": position, "$width": width }),
             React.createElement(Header$2, null,
                 React.createElement("div", null,
                     title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
@@ -2719,7 +2731,7 @@ var Drawer = function (_a) {
                 tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
                 primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
-        scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
+        scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;