@m4l/components 9.1.116 → 9.1.117

package/components/PaperForm/PaperForm.js

@@ -4,6 +4,7 @@ import { P as PaperFormRootStyled, C as ContentStyled } from "./slots/PaperFormS
 import { useRef } from "react";
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { P as PAPER_FORM_KEY } from "./constants.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { P as PropertyValue } from "../PropertyValue/PropertyValue.js";
 const isPropertyValue = (child) => typeof child === "object" && child !== null && "property" in child && "value" in child;
 const renderChildren = (children) => {
@@ -25,14 +26,22 @@ function PaperForm(props) {
     isForm = false,
     variant = "standard"
   } = props;
+  const { currentSize } = useComponentSize(size);
   const paperFormRef = useRef(null);
   const rootClass = getComponentSlotRoot(PAPER_FORM_KEY);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = {
+    size: adjustedSize,
+    color,
+    isForm,
+    paperFormVariant: variant
+  };
   return /* @__PURE__ */ jsxs(
     PaperFormRootStyled,
     {
       className: rootClass,
       ref: paperFormRef,
-      ownerState: { isForm, color, variant },
+      ownerState: { ...ownerState },
       ...process.env.NODE_ENV !== "production" ? { "data-testid": dataTestId } : {},
       children: [
         /* @__PURE__ */ jsx(Header, { urlIcon, title, color, size }),

package/components/PaperForm/styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************
@@ -11,8 +12,7 @@ const paperFormStyles = {
     border: `${theme.size.borderStroke.container}`,
     borderColor: theme.vars.palette.border.default,
     width: "100%",
-    height: "auto",
-    overflow: "hidden"
+    height: "auto"
   }),
   /**
    * ************************************************************
@@ -26,10 +26,15 @@ const paperFormStyles = {
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
     overflow: "hidden",
-    height: "auto",
-    padding: `${theme.vars.size.baseSpacings.sp2}`,
+    padding: `${theme.vars.size.baseSpacings.sp1} ${theme.vars.size.baseSpacings.sp2}`,
     borderRadius: `${theme.vars.size.borderRadius.r1} ${theme.vars.size.borderRadius.r1} 0 0`,
-    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity
+    background: theme.vars.palette[ownerState.color ?? "default"].hoverOpacity,
+    alignSelf: "stretch",
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    )
   }),
   /**
    * ************************************************************
@@ -43,8 +48,7 @@ const paperFormStyles = {
     fontSize: theme.typography.body,
     variants: [],
     display: "inline-flex",
-    alignItems: "center",
-    marginTop: "1px"
+    alignItems: "center"
   }),
   /**
    * ************************************************************

package/components/PaperForm/types.d.ts

@@ -25,7 +25,7 @@ interface CommonsProps {
     paperFormVariant?: PaperFormProps['variant'];
 }
 export type HeaderProps = Omit<PaperFormProps, 'children' | 'isForm' | 'variant'> & CommonsProps;
-export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color'> & CommonsProps;
+export type PaperFormOwnerState = Pick<PaperFormProps, 'isForm' | 'color' | 'size'> & CommonsProps;
 /**
  * ***********************************
  * Slots para los estilos utilizados

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.116",
+  "version": "9.1.117",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"