@trops/dash-react 1.0.10 → 1.0.12

package/dist/index.js

@@ -1377,7 +1377,7 @@ function Paragraph(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? null : _ref$text,
     _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? "p-6" : _ref$padding,
+    padding = _ref$padding === void 0 ? "py-2" : _ref$padding,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? null : _ref$onClick,
     _ref$scrollable = _ref.scrollable,
@@ -1460,7 +1460,7 @@ function Paragraph2(_ref2) {
 function Paragraph3(_ref3) {
   var text = _ref3.text,
     _ref3$padding = _ref3.padding,
-    padding = _ref3$padding === void 0 ? true : _ref3$padding,
+    padding = _ref3$padding === void 0 ? "py-1" : _ref3$padding,
     _ref3$onClick = _ref3.onClick,
     onClick = _ref3$onClick === void 0 ? null : _ref3$onClick,
     _ref3$scrollable = _ref3.scrollable,
@@ -1667,7 +1667,7 @@ function Heading(_ref) {
     as = _ref$as === void 0 ? null : _ref$as;
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-3 2xl:py-4" : "p-0";
   var styles = getStylesForItem(themeObjects.HEADING, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -1696,7 +1696,7 @@ function Heading2(_ref2) {
     as = _ref2$as === void 0 ? null : _ref2$as;
   var _useContext2 = useContext(ThemeContext),
     currentTheme = _useContext2.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-2.5 2xl:py-3" : "p-0";
   var styles = getStylesForItem(themeObjects.HEADING_2, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -1725,7 +1725,7 @@ function Heading3(_ref3) {
     as = _ref3$as === void 0 ? null : _ref3$as;
   var _useContext3 = useContext(ThemeContext),
     currentTheme = _useContext3.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-2 2xl:py-3" : "p-0";
   var styles = getStylesForItem(themeObjects.HEADING_3, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -1754,7 +1754,7 @@ function SubHeading(_ref4) {
     as = _ref4$as === void 0 ? null : _ref4$as;
   var _useContext4 = useContext(ThemeContext),
     currentTheme = _useContext4.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-2 2xl:py-3" : "p-0";
   var styles = getStylesForItem(themeObjects.SUBHEADING, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -1783,7 +1783,7 @@ function SubHeading2(_ref5) {
     as = _ref5$as === void 0 ? null : _ref5$as;
   var _useContext5 = useContext(ThemeContext),
     currentTheme = _useContext5.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-1.5 2xl:py-2" : "p-0";
   var styles = getStylesForItem(themeObjects.SUBHEADING_2, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -1812,7 +1812,7 @@ function SubHeading3(_ref6) {
     as = _ref6$as === void 0 ? null : _ref6$as;
   var _useContext6 = useContext(ThemeContext),
     currentTheme = _useContext6.currentTheme;
-  var paddingStyles = padding === true ? "p-4 2xl:px-6 2xl:py-4" : "p-0";
+  var paddingStyles = padding === true ? "py-1 2xl:py-2" : "p-0";
   var styles = getStylesForItem(themeObjects.SUBHEADING_3, currentTheme, {
     textColor: textColor,
     backgroundColor: backgroundColor,
@@ -6676,28 +6676,47 @@ var SettingsModalFooter = function SettingsModalFooter(_ref4) {
     })]
   });
 };
-var SettingsModal = function SettingsModal(_ref5) {
-  var isOpen = _ref5.isOpen,
-    setIsOpen = _ref5.setIsOpen,
-    _ref5$width = _ref5.width,
-    width = _ref5$width === void 0 ? "w-11/12 xl:w-5/6" : _ref5$width,
-    _ref5$height = _ref5.height,
-    height = _ref5$height === void 0 ? "h-5/6" : _ref5$height,
-    children = _ref5.children,
+var SettingsModalTitle = function SettingsModalTitle(_ref5) {
+  var children = _ref5.children,
     _ref5$className = _ref5.className,
-    className = _ref5$className === void 0 ? "" : _ref5$className;
+    className = _ref5$className === void 0 ? "" : _ref5$className,
+    _ref5$padding = _ref5.padding,
+    padding = _ref5$padding === void 0 ? "px-4 py-3" : _ref5$padding;
   var _useContext4 = useContext(ThemeContext),
     currentTheme = _useContext4.currentTheme;
+  var styles = getStylesForItem(themeObjects.PANEL_HEADER, currentTheme, {
+    grow: false
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "flex flex-row items-center flex-shrink-0 border-b ".concat(padding, " ").concat(styles.borderColor || "", " ").concat(styles.textColor || "", " ").concat(className),
+    children: children
+  });
+};
+var SettingsModal = function SettingsModal(_ref6) {
+  var isOpen = _ref6.isOpen,
+    setIsOpen = _ref6.setIsOpen,
+    _ref6$width = _ref6.width,
+    width = _ref6$width === void 0 ? "w-11/12 xl:w-5/6" : _ref6$width,
+    _ref6$height = _ref6.height,
+    height = _ref6$height === void 0 ? "h-5/6" : _ref6$height,
+    children = _ref6.children,
+    _ref6$className = _ref6.className,
+    className = _ref6$className === void 0 ? "" : _ref6$className;
+  var _useContext5 = useContext(ThemeContext),
+    currentTheme = _useContext5.currentTheme;
   var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
     scrollable: false,
     grow: false
   });
 
-  // Separate sidebar from other children
+  // Separate title, sidebar, and other children
+  var title = null;
   var sidebar = null;
   var otherChildren = [];
   Children.forEach(children, function (child) {
-    if (child && child.type === SettingsModalSidebar) {
+    if (child && child.type === SettingsModalTitle) {
+      title = child;
+    } else if (child && child.type === SettingsModalSidebar) {
       sidebar = child;
     } else {
       otherChildren.push(child);
@@ -6709,14 +6728,18 @@ var SettingsModal = function SettingsModal(_ref5) {
     width: width,
     height: height,
     children: /*#__PURE__*/jsxs("div", {
-      className: "flex flex-row h-full w-full rounded-lg overflow-clip ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || "", " border ").concat(className),
-      children: [sidebar, /*#__PURE__*/jsx("div", {
-        className: "flex flex-col flex-1 min-w-0",
-        children: otherChildren
+      className: "flex flex-col h-full w-full rounded-lg overflow-clip ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || "", " border ").concat(className),
+      children: [title, /*#__PURE__*/jsxs("div", {
+        className: "flex flex-row flex-1 min-h-0",
+        children: [sidebar, /*#__PURE__*/jsx("div", {
+          className: "flex flex-col flex-1 min-w-0",
+          children: otherChildren
+        })]
       })]
     })
   });
 };
+SettingsModal.Title = SettingsModalTitle;
 SettingsModal.Sidebar = SettingsModalSidebar;
 SettingsModal.Header = SettingsModalHeader;
 SettingsModal.Body = SettingsModalBody;