@m4l/components 9.1.46 → 9.1.48

package/@types/types.d.ts

@@ -128,7 +128,8 @@ import {
 import { SideBarOwnerState } from '../components/SideBar/types';
 import {
   PaperFormSlotsType,
-  PaperFormOwnerState } from '../components/PaperForm/types';
+  PaperFormOwnerState,
+} from '../components/PaperForm/types';
 import { WindowBaseOwnerState, WindowBaseType } from '../components/WindowBase';
 import { OwnerStateWindowConfirm, WindowConfirmType } from '../components/WindowConfirm';
 import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
@@ -147,6 +148,7 @@ import { BooleanFormatterOwnerState, PresentationType } from '../components/form
 import { ToggleIconButtonOwnerState, ToggleIconButtonSlotsType } from '../components/mui_extended/ToggleIconButton/types';
 
 import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/Popover/types';
+import { PropertyVaLueOwnerState, PropertyValueType } from '../components/PropertyValue/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -195,6 +197,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: ToggleButtonSlotsType;
     M4LBooleanFormatter: PresentationType;
     M4LToggleIconButton: ToggleIconButtonSlotsType;
+    M4LPropertyValue: PropertyValueType;
   }
 
   interface ComponentsPropsList {
@@ -243,6 +246,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: Partial<ToggleButtonOwnerState>;
     M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
+    M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
   }
 
   interface Components {
@@ -535,31 +539,36 @@ declare module '@mui/material/styles' {
       defaultProps?: ComponentsPropsList['M4LAvatar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAvatar'];
       variants?: ComponentsVariants['M4LAvatar'];
-    M4LAccordion?: {
-      defaultProps?: ComponentsPropsList['M4LAccordion'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
-      variants?: ComponentsVariants['M4LAccordion'];
-    };
-    M4LPopper?: {
-      defaultProps?: ComponentsPropsList['M4LPopper'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LPopper'];
-      variants?: ComponentsVariants['M4LPopper'];
-    };
-    M4LToggleButton?: {
-      defaultProps?: ComponentsPropsList['M4LToggleButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LToggleButton'];
-      variants?: ComponentsVariants['M4LToggleButton'];
-    };
-    M4LBooleanFormatter?: {
-      defaultProps?: ComponentsPropsList['M4LBooleanFormatter'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LBooleanFormatter'];
-      variants?: ComponentsVariants['M4LBooleanFormatter'];
-    };
-    M4LToggleIconButton?: {
-      defaultProps?: ComponentsPropsList['M4LToggleIconButton'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LToggleIconButton'];
-      variants?: ComponentsVariants['M4LToggleIconButton'];
-    };
+      M4LAccordion?: {
+        defaultProps?: ComponentsPropsList['M4LAccordion'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
+        variants?: ComponentsVariants['M4LAccordion'];
+      };
+      M4LPopper?: {
+        defaultProps?: ComponentsPropsList['M4LPopper'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LPopper'];
+        variants?: ComponentsVariants['M4LPopper'];
+      };
+      M4LToggleButton?: {
+        defaultProps?: ComponentsPropsList['M4LToggleButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LToggleButton'];
+        variants?: ComponentsVariants['M4LToggleButton'];
+      };
+      M4LBooleanFormatter?: {
+        defaultProps?: ComponentsPropsList['M4LBooleanFormatter'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LBooleanFormatter'];
+        variants?: ComponentsVariants['M4LBooleanFormatter'];
+      };
+      M4LToggleIconButton?: {
+        defaultProps?: ComponentsPropsList['M4LToggleIconButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LToggleIconButton'];
+        variants?: ComponentsVariants['M4LToggleIconButton'];
+        M4LPropertyValue?: {
+          defaultProps?: ComponentsPropsList['M4LPropertyValue'];
+          styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
+          variants?: ComponentsVariants['M4LPropertyValue'];
+        };
+      }
+    }
   }
- }
 }

package/components/Label/Label.styles.js

@@ -3,8 +3,8 @@ const labelStyles = {
    * Estilos para el contenedor raíz del Label.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ ownerState, theme }) => ({
     display: "flex",
@@ -37,11 +37,10 @@ const labelStyles = {
    * Estilos para el slot Typography.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
-    marginInlineStart: theme.spacing(0.4),
     "& .MuiTypography-root": {
       color: theme.vars.palette.text.secondary,
       [theme.breakpoints.up("sm")]: {
@@ -59,11 +58,10 @@ const labelStyles = {
    * Estilos para el mensaje obligatorio.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
-    marginInlineStart: theme.spacing(0.4),
     "& .MuiTypography-root": {
       color: theme.vars.palette.text.primary,
       [theme.breakpoints.up("sm")]: {
@@ -78,8 +76,8 @@ const labelStyles = {
    * Estilos para el icono del mensaje de ayuda.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   iconHelperMessageStyled: ({ theme }) => ({
     height: "24px",
@@ -97,8 +95,8 @@ const labelStyles = {
    *  Estilos para el componente Skeleton.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
+   * @updatedAt 2024-12-30 12:00:12 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
     // borderRadius:theme.vars.size.borderRadius.r1,

package/components/PropertyValue/PropertyValue.d.ts

@@ -1,5 +1,9 @@
 import { PropertyValueProps } from './types';
 /**
- * TODO: Documentar
+ * PropertyValue component is used to display a property and its value in a form or not.
+ * @author cesar - automatic
+ * @createdAt 2024-12-19 14:44:17 - automatic
+ * @updatedAt 2024-12-30 09:30:27 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare function PropertyValue(props: PropertyValueProps): import("react/jsx-runtime").JSX.Element;

package/components/PropertyValue/PropertyValue.js

@@ -1,195 +1,82 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { P as PropertyValueRoot } from "./styles.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { p as propertyValueUtilityClasses } from "./classes/index.js";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
-import { T as TEST_PROPS_DATA, C as COMPONENT_PREFIX } from "./constants.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { T as TEST_PROPS_DATA, P as PROPERTY_VALUE_KEY_COMPONENT, C as COMPONENT_PREFIX } from "./constants.js";
+import { a as getPropDataTestId, g as getNameDataTestId } from "../../test/getNameDataTestId.js";
+import { P as PropertyValueRootStyled, a as PropertyStyled, V as ValueStyled } from "./slots/PropertyValueSlots.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { L as Label } from "../Label/Label.js";
+import { T as Typography } from "../mui_extended/Typography/Typography.js";
 import { I as Icon } from "../Icon/Icon.js";
 function PropertyValue(props) {
   const {
     property,
-    iconProperty,
+    startAdornment,
     value,
-    propertyWidth = 200,
-    valueHeight = "auto",
-    valueWidth = "100",
-    valueWidthMobile,
-    isForm,
     className,
+    isForm,
     dataTestId = "",
     disabled = false,
     mandatory,
     mandatoryMessage,
-    helperMessage
+    helperMessage,
+    semanticWidth = "fullWidth"
   } = props;
-  const isDesktop = useResponsiveDesktop();
-  const getValueW = () => {
-    if (valueWidthMobile && !isDesktop) {
-      return valueWidthMobile;
-    }
-    if (valueWidth === 75 && isDesktop) {
-      return 75;
-    } else if (valueWidth === 75 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 50 && isDesktop) {
-      return 50;
-    } else if (valueWidth === 50 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
-      return valueWidth;
-    }
-    if (valueWidth === 25 && !isDesktop) {
-      return 50;
-    }
-    if (valueWidth === 12.5 && !isDesktop) {
-      return 25;
-    }
-    return 100;
-  };
   const ownerState = {
     disabled: isForm && disabled ? disabled : false,
     isForm: isForm ? true : false,
-    isMobile: !isDesktop
+    semanticWidth
+  };
+  const renderIcon = () => {
+    if (!startAdornment) {
+      return null;
+    }
+    if (typeof startAdornment === "string") {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          src: startAdornment
+        }
+      );
+    }
+    return startAdornment;
+  };
+  const renderValue = () => {
+    if (typeof value === "string") {
+      return /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", children: value });
+    }
+    return value;
   };
-  const classes = propertyValueUtilityClasses(ownerState);
-  if (!isForm) {
-    return /* @__PURE__ */ jsxs(
-      PropertyValueRoot,
-      {
-        className: clsx(classes.root, className),
-        style: {
-          gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
-        },
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROPS_DATA]: JSON.stringify([
-            { property: property ? true : false, value: value ? true : false }
-          ]),
-          [TEST_PROP_ID]: getNameDataTestId(
-            COMPONENT_PREFIX,
-            "root",
-            dataTestId
-          )
-        } : {},
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: classes.property,
-              style: {
-                width: propertyWidth && isDesktop ? propertyWidth : "150px",
-                minWidth: propertyWidth && isDesktop ? propertyWidth : "150px"
-              },
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId(
-                  COMPONENT_PREFIX,
-                  "property",
-                  dataTestId
-                )
-              } : {},
-              children: [
-                iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
-                /* @__PURE__ */ jsx(
-                  Label,
-                  {
-                    label: property,
-                    mandatory,
-                    mandatoryMessage,
-                    helperMessage
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classes.value,
-              style: {
-                width: `${getValueW()}%`,
-                maxWidth: `${getValueW()}%`,
-                height: valueHeight
-              },
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId(
-                  COMPONENT_PREFIX,
-                  "value",
-                  dataTestId
-                )
-              } : {},
-              children: value
-            }
-          )
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs(
-    PropertyValueRoot,
+    PropertyValueRootStyled,
     {
-      className: clsx(classes.root, className),
-      style: { gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
+      role: isForm ? "property-value-form-role" : "property-value-role",
+      className: clsx(getComponentSlotRoot(PROPERTY_VALUE_KEY_COMPONENT), className),
+      ...getPropDataTestId(PROPERTY_VALUE_KEY_COMPONENT, "root", dataTestId),
+      ownerState,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROPS_DATA]: JSON.stringify([
-          { property: property ? true : false, value: value ? true : false }
-        ]),
-        [TEST_PROP_ID]: getNameDataTestId(
-          COMPONENT_PREFIX,
-          "root",
-          dataTestId
-        )
+        [TEST_PROPS_DATA]: JSON.stringify([{ property: !!property, value: !!value }]),
+        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
       } : {},
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(classes.root, className),
-            style: { width: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROPS_DATA]: JSON.stringify([
-                { property: property ? true : false, value: value ? true : false }
-              ]),
-              [TEST_PROP_ID]: getNameDataTestId(
-                COMPONENT_PREFIX,
-                "root",
-                dataTestId
-              )
-            } : {},
-            children: [
-              iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
-              /* @__PURE__ */ jsx(
-                Label,
-                {
-                  label: property,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              )
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(PropertyStyled, { ownerState, children: [
+          renderIcon(),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              label: property,
+              mandatory,
+              mandatoryMessage,
+              helperMessage
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          "div",
+          ValueStyled,
           {
-            className: classes.value,
-            style: {
-              width: `${getValueW()}%`,
-              maxWidth: `${getValueW()}%`,
-              height: valueHeight
-            },
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId(
-                COMPONENT_PREFIX,
-                "value",
-                dataTestId
-              )
-            } : {},
-            children: value
+            role: "property-value-value-role",
+            ownerState,
+            children: renderValue()
           }
         )
       ]

package/components/PropertyValue/PropertyValue.styles.d.ts

@@ -0,0 +1,2 @@
+import { PropertyValueStyles } from './types';
+export declare const propertyValueStyles: PropertyValueStyles;

package/components/PropertyValue/PropertyValue.styles.js

@@ -0,0 +1,99 @@
+const CONTAINER_QUERY_NAME = "container";
+const propertyValueStyles = {
+  /**
+   * Property Value Root Styles
+   * @author cesar - automatic
+   * @createdAt 2024-12-19 14:44:17 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  Root: ({ theme, ownerState }) => {
+    const createSemanticStyle = (minWidth, maxWidth) => ({
+      minWidth,
+      maxWidth,
+      [`@container ${CONTAINER_QUERY_NAME} (max-width: ${parseInt(minWidth, 10)}px)`]: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      }
+    });
+    const semanticStylesMap = {
+      email: createSemanticStyle("260px", "400px"),
+      shortName: createSemanticStyle("40px", "90px"),
+      mediumName: createSemanticStyle("80px", "260px"),
+      bigName: createSemanticStyle("330px", "520px"),
+      shortId: createSemanticStyle("16px", "44px"),
+      mediumId: createSemanticStyle("28px", "60px"),
+      bigId: createSemanticStyle("36px", "200px"),
+      shortDescription: createSemanticStyle("324px", "796px"),
+      mediumDescription: createSemanticStyle("796px", "1500px"),
+      bigDescription: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      },
+      shortNumber: createSemanticStyle("30px", "50px"),
+      mediumNumber: createSemanticStyle("44px", "60px"),
+      bigNumber: createSemanticStyle("61px", "162px"),
+      percentNumber: createSemanticStyle("30px", "50px"),
+      fullWidth: {
+        minWidth: "100%",
+        maxWidth: "100%"
+      }
+    };
+    const semanticStyle = ownerState?.semanticWidth && semanticStylesMap[ownerState.semanticWidth] ? semanticStylesMap[ownerState.semanticWidth] : {};
+    return {
+      display: "flex",
+      flexDirection: ownerState?.isForm ? "column" : "row",
+      justifyContent: ownerState?.isForm ? "space-between" : "center",
+      alignItems: "flex-start",
+      gap: theme.vars.size.baseSpacings["sp0-5"],
+      color: theme.palette.text.primary,
+      paddingTop: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
+      paddingBottom: !ownerState?.isForm ? theme.vars.size.baseSpacings.sp1 : void 0,
+      borderBottom: !ownerState?.isForm ? `${theme.vars.palette.border.disabled} solid 1px` : "none",
+      "&:hover": !ownerState?.isForm && {
+        background: theme.vars.palette.background?.hover
+      },
+      ...semanticStyle,
+      [`@container ${CONTAINER_QUERY_NAME} (min-width: 0px) and (max-width: 400px)`]: {
+        flexDirection: "column"
+      },
+      ...theme.generalSettings.isMobile && {
+        flexDirection: "column"
+      },
+      variants: []
+    };
+  },
+  /**
+   * Property Styles
+   * @author cesar - automatic
+   * @createdAt 2024-12-26 11:44:46 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  property: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    minWidth: "200px",
+    width: ownerState?.semanticWidth ? "auto" : "200px",
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.primary
+  }),
+  /**
+   * Value Styles (Form and No Form Combined)
+   * @author cesar - automatic
+   * @createdAt 2024-12-26 11:44:46 - automatic
+   * @updatedAt 2025-01-02 08:01:12 - automatic
+   * @updatedUser cesar - automatic
+   */
+  value: ({ theme, ownerState }) => ({
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    ...ownerState?.isForm && {
+      gap: theme.vars.size.baseSpacings["sp0-5"]
+    }
+  })
+};
+export {
+  propertyValueStyles as p
+};

package/components/PropertyValue/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const COMPONENT_PREFIX = "m4l-property-value";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
 export declare const TEST_PROPS_DATA = "m4l-property-value-data";
+export declare const PROPERTY_VALUE_KEY_COMPONENT = "M4LPropertyValue";

package/components/PropertyValue/constants.js

@@ -1,6 +1,8 @@
 const COMPONENT_PREFIX = "m4l-property-value";
 const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
+const PROPERTY_VALUE_KEY_COMPONENT = "M4LPropertyValue";
 export {
   COMPONENT_PREFIX as C,
+  PROPERTY_VALUE_KEY_COMPONENT as P,
   TEST_PROPS_DATA as T
 };

package/components/PropertyValue/slots/PropertyValueEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum PropertyValueSlots {
+    Root = "Root",
+    property = "property",
+    value = "value"
+}

package/components/PropertyValue/slots/PropertyValueEnum.js

@@ -0,0 +1,9 @@
+var PropertyValueSlots = /* @__PURE__ */ ((PropertyValueSlots2) => {
+  PropertyValueSlots2["Root"] = "Root";
+  PropertyValueSlots2["property"] = "property";
+  PropertyValueSlots2["value"] = "value";
+  return PropertyValueSlots2;
+})(PropertyValueSlots || {});
+export {
+  PropertyValueSlots as P
+};

package/components/PropertyValue/slots/PropertyValueSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const PropertyValueRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const PropertyStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const ValueStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').PropertyVaLueOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/PropertyValue/slots/PropertyValueSlots.js

@@ -0,0 +1,21 @@
+import { styled } from "@mui/material/styles";
+import { P as PROPERTY_VALUE_KEY_COMPONENT } from "../constants.js";
+import { p as propertyValueStyles } from "../PropertyValue.styles.js";
+import { P as PropertyValueSlots } from "./PropertyValueEnum.js";
+const PropertyValueRootStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.Root
+})(propertyValueStyles?.Root);
+const PropertyStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.property
+})(propertyValueStyles?.property);
+const ValueStyled = styled("div", {
+  name: PROPERTY_VALUE_KEY_COMPONENT,
+  slot: PropertyValueSlots.value
+})(propertyValueStyles?.value);
+export {
+  PropertyValueRootStyled as P,
+  ValueStyled as V,
+  PropertyStyled as a
+};

package/components/PropertyValue/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PropertyValueEnum';
+export * from './PropertyValueSlots';

package/components/PropertyValue/tests/PropertyValue.test.d.ts

@@ -0,0 +1 @@
+export {};