@hexure/ui 1.8.1 → 1.8.2

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

@@ -7,6 +7,7 @@ export interface ButtonMenuProps {
     menuItems: Array<MenuItemProps>;
     maxHeight?: string | number;
     position?: 'left' | 'right';
+    format?: 'primary' | 'secondary';
 }
 declare const ButtonMenu: FC<ButtonMenuProps>;
 export default ButtonMenu;

package/dist/esm/index.js

@@ -2388,43 +2388,43 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$e = styled.div `
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: ${props => props.$maxHeight || '312px'};
-  padding: 10px;
-  width: 200px;
+const Wrapper$e = styled.div `
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: ${props => props.$maxHeight || '312px'};
+  padding: 10px;
+  width: 200px;
 `;
-const MenuItem = styled.div `
-  align-items: center;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  display: flex;
-  gap: 8px;
-  height: 38px;
-  padding: 8px;
-  &:hover {
-    background: rgba(1, 147, 215, 0.1);
-    cursor: pointer;
-
-    svg,
-    path {
-      fill: ${Colors.PRIMARY.Hex} !important;
-    }
-  }
+const MenuItem = styled.div `
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  display: flex;
+  gap: 8px;
+  height: 38px;
+  padding: 8px;
+  &:hover {
+    background: rgba(1, 147, 215, 0.1);
+    cursor: pointer;
+
+    svg,
+    path {
+      fill: ${Colors.PRIMARY.Hex} !important;
+    }
+  }
 `;
-const Title = styled.span `
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 400;
-  height: auto;
-  letter-spacing: 0px;
-  line-height: 22px;
-  text-align: left;
+const Title = styled.span `
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 400;
+  height: auto;
+  letter-spacing: 0px;
+  line-height: 22px;
+  text-align: left;
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
@@ -2435,21 +2435,21 @@ const MoreMenu = (_a) => {
     })));
 };
 
-const Wrapper$d = styled.div `
-  position: relative;
-  display: inline-block;
+const Wrapper$d = styled.div `
+  position: relative;
+  display: inline-block;
 `;
-const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
-  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
-  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
-  top: ${props => (props.$small ? '30px' : '40px')};
-  z-index: 10;
+const StyledMoreMenu = styled(MoreMenu) `
+  position: absolute;
+  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
+  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
+  top: ${props => (props.$small ? '30px' : '40px')};
+  z-index: 10;
 `;
-const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', }) => {
+const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', }) => {
     const [show_menu, toggleMenu] = useState(false);
     return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
-        React.createElement(Button, { disabled: disabled, format: 'primary', icon: mdiDotsHorizontal, small: small }, label),
+        React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
         show_menu ? (React.createElement(StyledMoreMenu, { "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
 };
 
@@ -3171,69 +3171,69 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, null, validationText) : null));
 };
 
-const Dropzone = styled.div `
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: dashed;
-  border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
-  background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
-  cursor: copy;
+const Dropzone = styled.div `
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
+  background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
+  cursor: copy;
 `;
-const IconWrapper$1 = styled.div `
-  width: 80px;
-  height: 80px;
-  border-radius: 40px;
-  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const IconWrapper$1 = styled.div `
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
-const StyledIcon$1 = styled(Icon) `
-  width: 40px !important;
-  height: 40px !important;
-
-  > path {
-    fill: ${Colors.GRAY.Hex} !important;
-  }
+const StyledIcon$1 = styled(Icon) `
+  width: 40px !important;
+  height: 40px !important;
+
+  > path {
+    fill: ${Colors.GRAY.Hex} !important;
+  }
 `;
-const ClickZone = styled.div `
-  margin: 40px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
+const ClickZone = styled.div `
+  margin: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
 `;
-const Content$1 = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
+const Content$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
 `;
-const Files = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  gap: 10px;
-  margin: 20px;
+const Files = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 10px;
+  margin: 20px;
 `;
-const File = styled.div `
-  display: flex;
-  padding: 10px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #cccccc;
-  background: #ffffff;
+const File = styled.div `
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
 `;
-const Remove$1 = styled(Icon) `
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-
-  > path {
-    fill: ${Colors.RED.Hex} !important;
-  }
+const Remove$1 = styled(Icon) `
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  > path {
+    fill: ${Colors.RED.Hex} !important;
+  }
 `;
 const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
     const inputRef = useRef(null);
@@ -3775,30 +3775,30 @@ const MultiSelect = (_a) => {
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
 };
 
-const Wrapper$5 = styled.div `
-  display: flex;
-  padding: 16px 30px;
-  align-items: center;
-  gap: 20px;
-  align-self: stretch;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+const Wrapper$5 = styled.div `
+  display: flex;
+  padding: 16px 30px;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
 `;
-const Info = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  flex: 1 0 0;
+const Info = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
 `;
-const Breadcrumbs = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
+const Breadcrumbs = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
 `;
-const Actions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
+const Actions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
     const { menuItems = [], label = '', } = buttonMenu || {};