const a = {
  /**
   * Styles for the RHFormProvider wrapper.
   */
  formProvider: () => ({
    width: "100%"
  }),
  /**
   * Styles for the form content container (inner div).
   */
  contentRoot: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp4,
    width: "100%",
    padding: r.vars.size.baseSpacings.sp2,
    border: `1px solid ${r.vars.palette.border.default}`,
    borderRadius: r.vars.size.borderRadius.r1,
    "& .MuiLinearProgress-root": {
      backgroundColor: r.vars.palette.primary.opacity
    }
  }),
  /**
   * Styles for each form field wrapper.
   */
  fieldWrapper: ({ theme: r, ownerState: e }) => {
    const i = e;
    return {
      display: "flex",
      flexDirection: "column",
      gap: r.vars.size.baseSpacings.sp1,
      width: "100%",
      ...i?.readOnly && {
        opacity: 0.7
      },
      ...i?.disabled && {
        pointerEvents: "none",
        opacity: 0.5
      }
    };
  },
  /**
   * Styles for each field label.
   */
  label: () => ({
    width: "100%"
  }),
  /**
   * Styles for each field helper text.
   */
  helperText: () => ({
    width: "100%"
  }),
  /**
   * Styles for the section divider (for future use).
   */
  sectionDivider: ({ theme: r }) => ({
    width: "100%",
    height: r.vars.size.borderStroke.container,
    backgroundColor: r.vars.palette.border.main,
    marginTop: r.vars.size.baseSpacings.sp2,
    marginBottom: r.vars.size.baseSpacings.sp2
  }),
  /**
   * Styles for the CheckableList wrapper with fixed height.
   */
  checkableListWrapper: () => ({
    width: "100%",
    height: "400px",
    // Fixed height so CheckableList can calculate its container
    minHeight: "400px",
    display: "flex",
    flexDirection: "column"
  })
};
export {
  a as componentStyles
};
