@monolith-forensics/monolith-ui 1.2.17 → 1.2.18

package/dist/FormSection/FormSection.d.ts

@@ -9,6 +9,7 @@ interface FormSectionProps {
     onOpenChange?: (open: boolean) => void;
     allowCollapse?: boolean;
     size?: Size;
+    style?: React.CSSProperties;
 }
-declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<FormSectionProps, never>> & string & Omit<({ className, title, children, open, defaultOpen, onOpenChange, allowCollapse, }: FormSectionProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const FormSection: ({ title, children, open, defaultOpen, onOpenChange, allowCollapse, size, style, }: FormSectionProps) => import("react/jsx-runtime").JSX.Element;
 export default FormSection;

package/dist/FormSection/FormSection.js

@@ -2,16 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { useState } from "react";
 import styled from "styled-components";
-const FormSection = styled(({ className, title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, }) => {
-    const [_open, setOpen] = useState(defaultOpen);
-    const openState = open !== null && open !== void 0 ? open : _open;
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "section-header", onClick: (e) => {
-                    if (allowCollapse) {
-                        setOpen(!openState);
-                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!openState);
-                    }
-                }, children: [_jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
-}) `
+const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
   h3 {
     margin: 0;
     font-size: ${({ size = "md" }) => size === "xs"
@@ -52,10 +47,24 @@ const FormSection = styled(({ className, title, children, open, defaultOpen = tr
   }
 
   .section-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     padding: 10px 0px;
+
     &[data-open="false"] {
       display: none;
     }
   }
 `;
+const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, size, style, }) => {
+    const [_open, setOpen] = useState(defaultOpen);
+    const openState = open !== null && open !== void 0 ? open : _open;
+    return (_jsxs(StyledContainer, { className: "mfui-FormSection", size: size, style: style, children: [_jsxs("div", { className: "section-header", onClick: (e) => {
+                    if (allowCollapse) {
+                        setOpen(!openState);
+                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!openState);
+                    }
+                }, children: [_jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
+};
 export default FormSection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",